使用 CSS 网格使多个 different-width 列换行?
Use CSS grid to make multiple different-width columns wrap?
我正在为新的响应式布局测试 CSS 网格,但我遇到了换行问题。
我有一个导航栏,其中有一个 header 应该向左推,4 个按钮应该向右推。现在的问题是使用:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
如预期的那样制作了 5 个均匀分布且反应灵敏的网格单元。问题是我希望纽扣电池比 header 小得多。所以我想要的不是 1fr 1fr 1fr 1fr 1fr,而是 8fr 1fr 1fr 1fr。如何在保持使用重复自动调整的 wrapping/responsive 属性的同时执行此操作?
说明问题的 Codepen 示例:https://codepen.io/johnpyp/pen/ZJxdYK
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid>* {
align-text: center;
background-color: lightgreen;
height: 200px;
}
<div class="grid">
<div>I want this to be 8fr, but it is 1fr like the rest.</div>
<div>1fr</div>
<div>1fr</div>
<div>1fr</div>
</div>
您可以让第一个网格项目跨越 8 列:
.grid > div:first-child {
grid-column: span 8;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 8fr 1fr 1fr 1fr;
}
https://css-tricks.com/snippets/css/complete-guide-grid/#fr-unit
我正在为新的响应式布局测试 CSS 网格,但我遇到了换行问题。
我有一个导航栏,其中有一个 header 应该向左推,4 个按钮应该向右推。现在的问题是使用:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
如预期的那样制作了 5 个均匀分布且反应灵敏的网格单元。问题是我希望纽扣电池比 header 小得多。所以我想要的不是 1fr 1fr 1fr 1fr 1fr,而是 8fr 1fr 1fr 1fr。如何在保持使用重复自动调整的 wrapping/responsive 属性的同时执行此操作?
说明问题的 Codepen 示例:https://codepen.io/johnpyp/pen/ZJxdYK
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid>* {
align-text: center;
background-color: lightgreen;
height: 200px;
}
<div class="grid">
<div>I want this to be 8fr, but it is 1fr like the rest.</div>
<div>1fr</div>
<div>1fr</div>
<div>1fr</div>
</div>
您可以让第一个网格项目跨越 8 列:
.grid > div:first-child {
grid-column: span 8;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 8fr 1fr 1fr 1fr;
}
https://css-tricks.com/snippets/css/complete-guide-grid/#fr-unit