CSS网格创建不相等的网格
CSS网格创建不相等的网格
提问于 2019-05-21 21:31:55
开始使用CSS网格而不是boostrap，我遇到了一些问题来解决它。
我想创建一个有4fr和8fr列的网格布局(就像boostrap 8和4列一样)，当4r网格中的div填满它时，div就会转到第二行，就像flex-wrap:wrap一样。
但它并不工作，它只是一个接一个地推动它内联，而忽略了网格的边界
.home {
display: grid;
grid-template-columns: 4fr 8fr;
grid-template-rows: 100%;
height: 100%;
}<div class="home">
<div class="col-8">
</div>
<div class="col-4">
<mat-button-toggle-group class="side-menu-button">
<mat-button-toggle>test </mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
我甚至试着把它改成
grid-template-columns: repeat(1, auto-fill, 4fr 8fr);回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-22 02:37:33
如果您只是想使用网格在div中包装项目，那么您所做的基本上应该是可行的。不要忘记告诉.col-8和.col-4它们在您设置的网格中的位置，并将您想要包装的子项设置为inline-block
* {
box-sizing: border-box;
}
.home {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100%;
height: 100%;
width: 100%;
grid-gap: 20px;
}
.col-8 {
grid-area: 1/1/1/9;
}
.col-4 {
grid-area: 1/9/1/13;
}
.bluebox,
.blackbox {
display: inline-block;
width: 50px;
height: 20px;
}
.bluebox {
background-color: blue;
}
.blackbox {
background-color: black;
}<div class="home">
<div class="col-8">
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
</div>
<div class="col-4">
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
</div>
</div>
我之所以设置12列而不是8fr的列和4fr的列，是因为我不清楚您是否想要像bootstrap这样的12列可用的系统(这是我实现它的方式)，或者字面上只有两列。无论哪种方式都应该适用于您在问题中描述的内容，但12个单独的列在以后可能更具可扩展性。
这是一支包含上述代码的笔：https://codepen.io/grantnoe/pen/MdOQOv
grid-area是我用来设置.home的孩子的位置的东西。格式如下：
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
唯一需要注意的是，您已经将想要包装的子元素嵌套在辅助元素<mat-button-toggle-group>中。考虑将该元素的宽度调整为100%，以填充网格的子.col-4。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56239457
复制相关文章
相似问题