我有以下标记：
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>我希望布局能够实现这样一种布局，其中前两个子div作为两列并排排列，而第三个子div位于它自己的一行上，占据整个宽度。
第一个子列将是固定宽度（30px），而第二个子列应占据剩余空间。
我已经尝试过了，但它不能满足我的需求：
.wrapper {
display: grid;
grid-template-columns: 20px auto 100%;
border:1px solid white;
}
2条答案
按热度按时间pod7payv1#
也许像这样
第一个
yqlxgs2m2#
这是我喜欢的方法。
首先，用
grid-template: 1fr 1fr / 1fr 1fr除以4，得到column sizes / row sizes然后，想象第一行有两个正方形（第一个
1fr 1fr）现在想象一下三条线（左边方块的第一条线画出一条垂直线，两个相邻的方块画出第二条线，第二个方块画出第三条线）。
|▢|▢|因此，您对#red说，从第1行开始，到第2行结束
grid-column: 1 / 2，对#green说，从第2行开始，到第3行结束，以此类推。结果如下所示：
第一个