چیدمان با گرید

فلکس‌باکس یک بُعد را خوب می‌چیند: یا ردیف، یا ستون. اما صفحه‌های واقعی معمولاً هر دو را هم‌زمان می‌خواهند: گالری عکس با چند ستون و چند ردیف، یا اسکلت کلاسیک سایت با سرصفحه و ستون کناری و بخش اصلی. برای چیدمان دوبعدی، CSS گرید (Grid) را دارد؛ الگویی که کل شبکه را پیش از آمدن آیتم‌ها تعریف می‌کند و بعد آیتم‌ها را در خانه‌هایش می‌نشاند.

ستون‌ها با واحد fr

روی والد display: grid می‌گذارید و با grid-template-columns ستون‌ها را تعریف می‌کنید. واحد fr سهم از فضای آزاد است؛ اگر سه ستون 1fr بگذارید، فضای موجود به سه سهم برابر تقسیم می‌شود:

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

<div class="gallery">
  <img src="1.jpg" alt="An alley in the rain">
  <img src="2.jpg" alt="A mountain at dusk">
  <img src="3.jpg" alt="The sea in summer">
</div>

سه نکته در این کد کوتاه نهفته است. ستون‌ها با تغییر عرض صفحه مقیاس می‌شوند، چون fr نسبی است. فاصلهٔ ردیف‌ها و ستون‌ها را با همان gap می‌دهید که در فلکس‌باکس دیدید. و برای ستون‌های برابر نیازی به تکرار دستی نیست؛ تابع repeat کار را کوتاه می‌کند:

.gallery {
  grid-template-columns: repeat(3, 1fr); /* same as 1fr 1fr 1fr */
}

می‌توانید ستون‌های ثابت و سیال را مخلوط کنید؛ مثلاً 200px 1fr یعنی ستون اول همیشه ۲۰۰ پیکسل و ستون دوم باقی فضا. برای ردیف‌ها هم grid-template-rows همین کار را می‌کند، هرچند در بیشتر طرح‌ها ارتفاع ردیف‌ها از محتوا می‌آید و لازم نیست دستی تعیین شود.

پوشش سلول‌ها: span

هر آیتم به‌طور پیش‌فرض در یک خانهٔ شبکه می‌نشیند، اما می‌توانید آن را روی چند ستون یا ردیف پوشش دهید. ویژگی grid-column با کلمهٔ span این کار را می‌کند:

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gallery img:first-child {
  grid-column: span 2; /* first image spans two columns */
}

به‌جای span می‌توانید شمارهٔ خط شروع و پایان بنویسید؛ خط‌های شبکه از ۱ شمرده می‌شوند و grid-column: 1 / 3 یعنی از خط ۱ تا خط ۳، که همان دو ستون است. این نحو خط‌محور برای طرح‌های پیچیده به کار می‌آید؛ در بیشتر موارد span خواناتر است.

قالب نقاط: grid-template-areas

زیباترین ویژگی گرید، ترسیم قالب صفحه با نام‌ها است. به هر ناحیه یک اسم می‌دهید و در رشته‌ای نقاشی‌مانند می‌گویید هر ناحیه کدام خانه‌ها را می‌گیرد. سپس هر فرزند با grid-area به ناحیهٔ خود وصل می‌شود:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
}

.page header { grid-area: header; }
.page aside  { grid-area: sidebar; }
.page main   { grid-area: main; }
.page footer { grid-area: footer; }

رشتهٔ نقاط را چنین بخوانید: صفحه دو ستون دارد؛ ردیف اول دو خانه به نام header پوشش داده شده، ردیف دوم به sidebar و main تقسیم شده و ردیف سوم دوباره footer تمام‌عرض است. قاعدهٔ حیاتی این است که نقشه باید مستطیلی کامل باشد؛ نمی‌توانید وسط یک ردیف را خالی بگذارید. زیبایی این روش در واکنش‌گرا بودنش است: با تغییر همین رشته، در صفحه‌های کوچک ستون کناری زیر بخش اصلی می‌رود؛ کاری که در درس بعدی خواهید دید.

گالری خودکار با minmax

یک الگوی حرفه‌ای که همین حالا بشناسید: گالری‌ای که خودش تعداد ستون‌ها را حساب می‌کند. تابع minmax حداقل و حداکثر عرض هر ستون را می‌دهد و auto-fill تا جا شد، ستون تازه می‌سازد:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

با این چند سطر، گالری شما بدون حتی یک پرس‌وجوی رسانه‌ای در صفحه‌های بزرگ چهار ستون و در صفحه‌های کوچک دو ستون می‌شود.

تمرین‌ها

/* Write your code here */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery img:first-child,
.gallery img:nth-child(4) {
  grid-column: span 2;
}

:::

خلاصه

• display: grid با grid-template-columns شبکهٔ دوبعدی می‌سازد و واحد fr سهم نسبی از فضا است.
• repeat(3, 1fr) ستون‌های تکراری را کوتاه می‌نویسد و gap فاصلهٔ ردیف‌ها و ستون‌ها را یک‌جا می‌دهد.
• grid-column: span 2 آیتم را روی دو ستون پوشش می‌دهد؛ نحو 1 / 3 بر پایهٔ شمارهٔ خطوط شبکه است.
• grid-template-areas قالب صفحه را با نام و نقشهٔ مستطیلی ترسیم می‌کند و فرزندان با grid-area جا می‌گیرند.
• ترکیب repeat(auto-fill, minmax()) گالری خودواکنش‌گرا می‌سازد و قاعدهٔ ساده این است: یک خط فلکس، شبکه گرید.

شبکه‌ها را می‌چینید؛ در درس پایانی یاد می‌گیرید صفحه را برای همهٔ اندازه‌های صفحه‌نمایش آماده کنید: طراحی واکنش‌گرا.