شبکه 12 دهانه

کلاسیک دیگر: شبکه 12 دهانه. شما می توانید به سرعت گریدها را در CSS با تابع repeat() بنویسید. استفاده از: repeat(12, 1fr); برای ستون های الگوی شبکه ای 12 ستون هر یک از 1fr را به شما می دهد.

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

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

اکنون شما یک شبکه مسیر 12 ستونی دارید، می توانید عناصر فرزند را روی شبکه قرار دهید. یکی از راه های انجام این کار قرار دادن آنها با استفاده از خطوط شبکه است. به عنوان مثال، grid-column: 1 / 13 از اولین خط تا آخرین (سیزدهم) و 12 ستون را در بر می گیرد. grid-column: 1 / 5; چهار مورد اول را در بر می گیرد.

روش دیگر برای نوشتن این، استفاده از کلمه کلیدی span است. با span ، خط شروع و سپس تعداد ستون هایی را که از آن نقطه شروع باید باز شوند را تعیین می کنید. در این حالت، grid-column: 1 / span 12 معادل grid-column: 1 / 13 و grid-column: 2 / span 6 معادل 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
}