Grid: المناطق وauto-fit وminmax()

يخطّط flexbox الأشياء في اتجاه واحد ويترك لكل سطر أن يتّخذ قراراته بنفسه. هذا مثالي لصف من الفلاتر، وخاطئ لشبكة المتحدّثين في Waypoint، حيث يجب أن تصطفّ كل بطاقة في العمود مع البطاقات فوقها وتحتها. حين تحتاج إلى أن تتّفق الصفوف والأعمدة معًا، فأنت تريد grid.

يبني هذا الدرس تخطيطين في صفحة الجدول: هيكل الصفحة بمناطق مسمّاة، وشبكة المتحدّثين التي تقرّر عدد أعمدتها بنفسها.

ارسم الصفحة بقوالب المناطق

لصفحة الجدول رأس يمتدّ في الأعلى، وشريط جانبي للفلاتر، والمحتوى الرئيسي. باستخدام grid-template-areas ترسم هذا التخطيط مباشرةً:

.page {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-areas:
    "header  header"
    "filters main";
  gap: 1.5rem;
}
.site-header { grid-area: header; }
.filters     { grid-area: filters; }
.schedule    { grid-area: main; }

كل سلسلة نصية صفّ، وكل كلمة داخلها عمود. تكرار الاسم (header header) يجعل تلك المنطقة تمتدّ على العمودين. والنقطة . تشير إلى خلية فارغة. ويجب أن تكون المناطق مستطيلة: الشكل على هيئة حرف L غير صالح، ويُسقَط التصريح كله.

العائد يأتي حين يتغيّر التخطيط. على الشاشات الضيّقة يجب أن تجلس الفلاتر فوق الجلسات، فتعيد رسم السلاسل بدل نقل الـ HTML:

@media (width < 48rem) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "filters"
      "main";
  }
}

وحدة fr وحدّها الأدنى الخفيّ

تقسّم fr المساحة الحرّة في الشبكة بعد طرح الـ tracks الثابتة والفجوات. عمودان بقيمة 1fr في شبكة عرضها 600px مع فجوة 20px عرض كلٍّ منهما 290px.

وهناك فخّ ستقابله عاجلًا أو آجلًا: 1fr اختصار لـ minmax(auto, 1fr)، وauto كحدّ أدنى تعني «على الأقل عرض المحتوى الأدنى (min-content)». ضع رابطًا طويلًا متصلًا أو كتلة كود في أحد العمودين فيتّسع ويسرق المساحة من الآخر. لهذا يستخدم هيكل الصفحة أعلاه minmax(0, 1fr): فهي تسمح للعمود الرئيسي بالتقلّص تحت حجم محتواه، ويُعالَج أيّ فيضان بداخله (بوضع overflow-x: auto على كتلة الكود مثلًا). إنها نظير إصلاح min-width: 0 من الدرس السابق، لكن في grid.

شبكة متحدّثين تعدّ أعمدتها بنفسها

في Waypoint 23 متحدّثًا. على الهاتف يجب أن يتكدّسوا عموديًا؛ وعلى الحاسوب المحمول أربعة أو خمسة في الصف. تصريح واحد يتعامل مع كل العروض:

.speakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.speaker.featured {
  grid-column: 1 / -1;
}

اقرأها من الداخل إلى الخارج. minmax(180px, 1fr) تقول إن كل عمود لا يقل عن 180px ولا يزيد على حصة متساوية من المساحة الحرّة. وrepeat(auto-fit, …) تطلب من المتصفّح أن ينشئ أكبر عدد ممكن من هذه الأعمدة يتّسع. في حاوية عرضها 640px بفجوات 16px، تتّسع ثلاثة أعمدة بعرض 180px (ثلاثة أعمدة وفجوتان تساوي 572px) ولا تتّسع أربعة، فتحصل على ثلاثة أعمدة يتمدّد كلٌّ منها إلى نحو 203px.

grid-column: 1 / -1 تجعل متحدّث الـ keynote يمتدّ من الخط الأول إلى الأخير، أيًّا كان عدد الأعمدة. أرقام الخطوط السالبة تُعدّ من نهاية الشبكة الصريحة.

الفرق بين auto-fit وauto-fill لا يظهر إلا حين تكون العناصر أقل من الأعمدة. auto-fill تحتفظ بالـ tracks الفارغة، فيبقى المتحدّثان بحجم البطاقة ويتركان فراغًا. وauto-fit تطوي الـ tracks الفارغة إلى الصفر، فيتمدّد المتحدّثان على امتداد الصف. ولشبكة متحدّثين تكاد تكون فارغة أحيانًا (اليوم الثاني فيه أربعة متحدّثين فقط)، اختر بحسب التصميم: auto-fill لعرض بطاقات ثابت، وauto-fit لصف ممتلئ.

دورك الآن

يعطيك التمرين هيكل الصفحة وشبكة المتحدّثين بأعمدة مكتوبة يدويًا. سمِّ المناطق، وحوّل المتحدّثين إلى auto-fit، واجعل الـ keynote يمتدّ على الصف كاملًا. تغيّر الفحوصات حجم الصفحة لتتأكّد من أن عدد الأعمدة يتكيّف. وبعدها ستجعل محتويات بطاقات grid تصطفّ عبر البطاقات باستخدام الـ subgrid.