多列布局每列宽度相等

两列布局可以使用以下方法：

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的合并简写形式。