CSS · Reusable Grid

1. 先设置一个 class 为 grid，并设定 gap
2. 子元素中再设置具体的列数

如设一个上为 2 列和下为 3 列的栅格布局：

CSS:

css
.grid {
  display: grid;
  gap: 1.2rem;
}
.grid--2--cols {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3--cols {
  grid-template-columns: repeat(3, 1fr);
}

HTML:

html
<section class="grid grid--2--cols">
  <div>Text1</div>
  <div>Text2</div>
</section>
<section class="grid grid--3--cols">
  <div>Text1</div>
  <div>Text2</div>
  <div>Text3</div>
</section>