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>
%sveltekit.body%