12-स्पैन ग्रिड

एक और क्लासिक: 12-स्पैन ग्रिड. repeat() फ़ंक्शन की मदद से, सीएसएस में तेज़ी से ग्रिड लिखे जा सकते हैं. इस्तेमाल करने से: ग्रिड टेंप्लेट कॉलम के लिए repeat(12, 1fr); आपको 1fr में से हर एक को 12 कॉलम देता है.

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

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

अब आपके पास 12 कॉलम का ट्रैक ग्रिड है. इसकी मदद से, चाइल्ड एलिमेंट को ग्रिड में रखा जा सकता है. ऐसा करने का एक तरीका यह है कि उन्हें ग्रिड लाइनों का इस्तेमाल करके रखा जाए. उदाहरण के लिए, grid-column: 1 / 13 पहली लाइन से आखिरी लाइन तक (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;
}

एचटीएमएल

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