开始使用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);
发布于 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
。
https://stackoverflow.com/questions/56239457
复制相似问题