Petak 12 span

Klasik lainnya: petak 12-span. Anda dapat dengan cepat menulis petak di CSS dengan fungsi repeat(). Menggunakan: repeat(12, 1fr); untuk kolom template petak akan memberi Anda 12 kolom masing-masing dengan nilai 1fr.

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

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

Sekarang Anda memiliki kisi lagu sebanyak 12 kolom, dan Anda dapat menempatkan elemen turunan pada kisi-kisi tersebut. Salah satu cara untuk melakukan ini adalah dengan menempatkannya menggunakan garis kisi. Misalnya, grid-column: 1 / 13 akan membentang dari baris pertama hingga baris terakhir (ke-13) dan mencakup 12 kolom. grid-column: 1 / 5; akan mencakup empat grup pertama.

Cara lain untuk menulisnya adalah dengan menggunakan kata kunci span. Dengan span, Anda dapat menetapkan garis awal lalu berapa banyak kolom yang perlu diperluas dari titik awal tersebut. Dalam hal ini, grid-column: 1 / span 12 akan setara dengan grid-column: 1 / 13, dan grid-column: 2 / span 6 akan setara dengan grid-column: 2 / 8.

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

 <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>

        .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
}