12 aralıklı ızgara

Bir diğer klasik: 12 aralıklı tablo. repeat() işleviyle CSS'de hızlıca ızgara yazabilirsiniz. Izgara şablonu sütunları için repeat(12, 1fr); kullanıldığında her 1fr sütununda 12 sütun bulunur.

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

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

Artık 12 sütunlu bir kanal ızgaranız var ve tabloya alt öğeler yerleştirebilirsiniz. Bunu yapmanın bir yolu, bunları ızgara çizgileri kullanarak yerleştirmektir. Örneğin, grid-column: 1 / 13, ilk satırdan sonuncuya (13.) kadar uzanan ve 12 sütuna kadar kapsar. grid-column: 1 / 5;, ilk dördü kapsar.

Bunu yazmanın diğer bir yolu da span anahtar kelimesini kullanmaktır. span ile başlangıç çizgisini ve ardından bu başlangıç noktasından itibaren kaç sütunun içine yer alacağını belirlersiniz. Bu durumda grid-column: 1 / span 12 değeri grid-column: 1 / 13, grid-column: 2 / span 6 ise grid-column: 2 / 8 ile eşdeğerdir.

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