标签: css-grid
使用 CSS 网格让多个不同宽度的列换行？
我正在为我的新响应式布局测试 CSS 网格，但我遇到了换行问题。
我有一个导航栏，它的标题应该推到左边，4 个按钮应该推到右边。现在的问题是使用：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
正如预期的那样，制作 5 个均匀间隔且响应迅速的网格单元。问题是我希望纽扣单元比标题小得多。所以我想要8fr 1fr 1fr 1fr而不是1fr 1fr 1fr 1fr 1fr。如何在保持使用重复自动调整的包装/响应属性的同时做到这一点？
说明问题的 Codepen 示例：https ://codepen.io/johnpyp/pen/ZJxdYK
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid>* {
align-text: center;
background-color: lightgreen;
height: 200px;
}推荐指数
解决办法
查看次数
创建一个按列流动的 CSS 网格，具有基于内容的动态列和行
我有一个动态数量的元素（所有相同的维度）。我想将它们放置在网格中，以便它们按列排序，列数基于可用容器宽度，行数基于元素数。
例如，假设有 9 个元素：
1 4 7
2 5 8
3 6 9
但是如果容器宽度扩大：
1 3 5 7 9
2 4 6 8
或收缩：
1 6
2 7
3 8
4 9
5
当项目按行而不是按列定位时，这可以正常工作。此外，如果我明确设置行数，它工作正常，但如果我对行和列使用自动填充，它只会在一行中显示所有内容。
这是我希望呈现为 3x3 网格的一个简单示例：https : //codepen.io/anon/pen/ZxPQNd
1 4 7
2 5 8
3 6 9
1 3 5 7 9
2 4 6 8
推荐指数
解决办法
查看次数
在网格上设置 css grid 子元素的大小，而不指定它应该进入的列或行
是否可以在它们应该跨越的行/列数量中设置 div 的高度和宽度，而没有具体指定它们应该进入哪些列或行？
例如，如果我有两个类，比如说.long和.wide，并且我希望.long该类为 3 行高和 1 列宽，并且.wide该类为 3 列宽但只有 1 行高。
我的特定用例涉及 Angular 5，我正在动态加载对象，并希望其中的一些比其他的大。我知道我可以使用 flexboxes 并设置高度来做到这一点，但是很想知道我是否可以用网格实现相同的（更整洁），但我一直在发现每个类都指定了grid-column: x/y; grid-row: a/b等等。
推荐指数
解决办法
查看次数
CSS 网格固定高度和可变宽度
我正在尝试使用 CSS 网格制作图像库。我需要这样的东西：
但所有能实现的就是这个JSFiddle。
问题是，DIV 占用了所有剩余空间，我不希望这样。
#gallery {
background: #cfc;
padding: 32px;
display: grid;
grid-auto-rows: 350px;
grid-template-columns: repeat(auto-fit, auto);
grid-gap: 10px;
}
.cell {
background: #fcc;
}
.cell>img {
height: 100%;
}<div id="gallery">
<div class="cell">
<img src="http://via.placeholder.com/350x500" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/250x150" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/150x150" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/370x150" />
</div>
</div>推荐指数
解决办法
查看次数
对齐不同块的子元素
我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。
我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。
代码
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
grid-template-rows: 1fr 1fr 1fr 1fr 30px;
display: grid;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}<div class="Grid">
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. …推荐指数
解决办法
查看次数
CSS Grid 响应式布局保持完整的行
我有一个用于我正在构建的仪表板的网格布局。我正在努力实现以下目标：
- 保持网格元素的纵横比
- 确保每个网格行都已填充/完成。这就是我的问题孩子。我在这里看到了多个教程和答案，其中随着宽度的减小，行中可能包含新行中的剩余元素。这会在孤立网格元素/不完整行右侧的网格中创建大量空白空间。我希望网格移动以将列减少到下一个最低的可整除数，从而得到完整的行。如果网格以不可整除的数字（素数）开头，则它只能转到单个列进行折叠，比如说 3 个网格项目折叠为 1，因为它是最高除数，因此保持完整的行。另一个示例，6 个项目会折叠为 3 列 2 列，然后是 2 列 3 列，然后是 1 列 6。
我很好奇是否有纯 CSS 方法来确保行保持完整，或者这是否需要 javascript。任何一个答案都足够了，但我更喜欢纯 css 解决方案。
到目前为止我的代码：
.grid-4-2-1 {
display: grid;
grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 20px;
margin: 20px;
}
.grid-child {
position: relative;
align-items: center;
justify-content: space-between;
padding-top: 100%;
background-color: #fff;
position: relative;
}
.grid-child .grid-content {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 100%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: …推荐指数
解决办法
查看次数
如何在 CSS 网格中垂直使用所有可用空间？
我正在尝试构建一个带有标题栏、导航页眉、页脚和中间的主要内容区域的 Web 布局（侧边栏和主视图一分为二）。
我打算使用 CSS Grid 布局。我当前的代码管理这一切，除了：主要内容（和侧边栏）根据其内容进行调整。这不是我想要的。
如何让第三个网格行填充所有剩余的垂直空间？
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: min-content min-content auto min-content;
grid-gap: 10px;
grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}
.title {
grid-area: header;
background-color: #1BC336;
}
.navigation {
grid-area: nav;
background-color: #C3A21B;
}
.sidebar {
grid-area: sidebar;
background-color: gold;
overflow: auto;
}
.main {
grid-area: main;
background-color: #1BC3B9;
overflow: auto;
}
.footer {
grid-area: footer;
background-color: #5C1BC3;
}<div class="grid">
<div …推荐指数
解决办法
查看次数
CSS Grid 布局 max-content 在 Firefox 中无法按预期工作
我使用 CSS Grid 布局来创建页面的基本布局，而我最初是在 Chrome 中工作的。我现在也在 Firefox 中对此进行了测试，并注意到一些我不理解的行为，并且似乎不符合我理解的规范。
我创建了一个显示行为的简化示例。问题是搜索标题 div 的高度。这被设置为 max-content 并且应该和所包含的元素一样大。
这在 Chrome 66 中按预期工作，但不适用于 Firefox 52 ESR 或 Firefox 62 开发人员版（均在 Linux 上）。在 Firefox 中，搜索头 div 更大并且超出了包含的范围。这只发生在搜索侧栏 div 中有输入元素时，并且我添加的元素越多，搜索标题 div 就越大。
我是否误解了 max-content 应该如何工作？为什么 Firefox 和 Chrome 在这种情况下表现不同？我该如何解决这个问题？
.search {
display: grid;
grid-template-columns: minmax(200px, 1fr) 4fr;
grid-template-rows: max-content auto;
grid-gap: 10px;
height: 95vh;
width: 100%;
align-self: stretch;
background: #FFF;
overflow: hidden;
margin-top: 5px;
}
.search-sidebar {
grid-column: 1 / 2;
grid-row: 1 / 3;
background: #CCFFFF;
padding: …推荐指数
解决办法
查看次数
SVG圆应该适应CSS网格高度而不重叠
在下面的示例中，圆圈适应网格宽度并保持其纵横比。随着容器宽度的缩小，圆圈也随之缩小……
然而，当高度小于宽度时（第二个框），圆圈不会缩小重叠在网格外，而是有没有办法让它在保持纵横比的同时也适应高度？
.container {
display: grid;
background-color: greenyellow;
margin: 5px;
min-height: 10px;
min-width: 10px;
}
.portrait {
max-height: 100px;
max-width: 200px;
}
.landscape {
max-height: 200px;
max-width: 100px;
}
.aspect-ratio {
grid-column: 1;
grid-row: 1;
background-color: deeppink;
border-radius: 50%;
align-self: center;
justify-self: center;
}<div class="container landscape">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>结果应如下所示：
推荐指数
解决办法
查看次数
居中网格内容，同时左对齐每行的内容，具有任意项/列宽度
我有一排任意宽度的项目。它们在容器内居中（注意红色容器左右两侧的空白）：
有时容器会小于所有项目的宽度：
发生这种情况时，我希望最后的项目像这样包装到下一行：
对我来说非常重要的是每一行的内容必须左对齐，但整个网格必须居中：
最初，我尝试用 FlexBox 实现它。经过很多挫折和头发拉扯，我了解到这在 FlexBox 中是不可能的：https ://stackoverflow.com/a/32811002/901944
同一页面上的另一个答案建议使用 CSS 网格而不是 flexbox。
CSS grid 产生的结果略有不同，但这也适合我：
这是使其工作的代码：
.red-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
justify-content: center;
}
该代码包含了很多的关键词，我不明白：grid-template-columns，repeat，auto-fit，minmax和max-content。我尝试阅读它们并失败了。没有任何指南和 API 文档明确解释这种特定组合的工作原理。MDN 文档太短而且含糊不清。
我特别纠结的是这个210px神奇的数字。为什么有必要？（呃，我知道这是必要的，因为规范是如何设计的，但这并不能帮助我理解。）
我的网格中项目的大小是任意的，所以我不能使用固定值。此外，设置此固定值会使结果略有偏差：小项目会增长，而大项目会溢出容器。
我本质上想要的是：
grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
但该规则被浏览器认为是错误的。
我偶然发现了这个答案，它解释了在这种情况下规范禁止使用两者min-content和max-content一起使用。答案的建议解决方案是……使用 Flexbox！
循环已关闭。我回到了我开始的地方，希望我现在头上的头发又少了一轮。
如何在左对齐每行内容的同时使网格居中，项目具有任意宽度？
为了您的方便，这里有一个样板：https ://jsbin.com/vuguhoj/edit?html,css, output
可以通过拖动右下角来调整容器的大小。
PS 不display: inline，float: left请。 …
推荐指数
解决办法
查看次数