Lưới 12 nhịp

Một cách cổ điển khác: lưới 12 nhịp. Bạn có thể nhanh chóng viết lưới trong CSS bằng hàm repeat(). Sử dụng repeat(12, 1fr); cho các cột mẫu lưới sẽ cung cấp cho bạn 12 cột trong mỗi 1fr cột.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

Bây giờ, bạn đã có lưới theo dõi 12 cột, bạn có thể đặt các phần tử con vào lưới. Một cách để làm việc này là đặt quảng cáo thông qua các đường lưới. Ví dụ: grid-column: 1 / 13 sẽ kéo dài từ dòng đầu tiên đến dòng cuối cùng (thứ 13) và kéo dài 12 cột. grid-column: 1 / 5; sẽ trải dài trong 4 phút đầu tiên.

Một cách khác để viết mã này là sử dụng từ khoá span. Với span, bạn đặt dòng bắt đầu, sau đó đặt số lượng cột cần kéo dài từ điểm xuất phát đó. Trong trường hợp này, grid-column: 1 / span 12 sẽ tương đương với grid-column: 1 / 13 và grid-column: 2 / span 6 sẽ tương đương với grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}