شبكة من 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 بالكامل من السطر الأول إلى السطر الأخير (رقم 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>

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