两列布局可以使用以下方法:
HTML:
<div class="wrapper">
<div class="left-column">Left Content</div>
<div class="right-column">Right Content</div>
</div>
CSS:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列,每列宽度相等 */
}
.left-column {
background-color: #ccc;
}
.right-column {
background-color: #ddd;
}
有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用 repeat() 函数,简化重复的值。上面的代码用 repeat() 改写如下。
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
三列布局可以使用以下方法:
HTML:
<div class="wrapper">
<div class="left-column">Left Content</div>
<div class="middle-column">Middle Content</div>
<div class="right-column">Right Content</div>
</div>
CSS:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列,每列宽度相等,或者 repeat(3, 1fr) */
}
.left-column {
background-color: #ccc;
}
.middle-column {
background-color: #ddd;
}
.right-column {
background-color: #eee;
}
使用以上 CSS 代码,我们可以将 wrapper 元素的子元素显示为两列或三列布局。可以根据需要自定义网格列的数量、宽度和高度等属性。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px 20px;
}
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。