آموزش CSS Grid به زبان ساده با مثال

رسانیکامنبع: https://rasanika.com

با استفاده از grid یا شبکه در CSS میتونیم به راحتی ساختار و چیدمان دو بعدی در صفحات وب ایجاد کنیم. در این پست بانحوه استفاده از Grid طی چند مثال ساده آشنا خواهیم شد.

CSS Grid چطور کار میکنه؟

وقتی به یه عنصر HTML ویژگی display: grid یا display: inline-grid میدیم اون عنصر تبدیل میشه به Grid Container و فرزندانش اتوماتیک وار تبدیل میشن به Grid Item. داخل Grid خطوط نامرئی عمودی و افقی وجود دارن به اسم Grid Lines که صفحه رو به سطر و ستون تقسیم میکنن. بین دو خط موازی اسمش Grid Track و بین چهار خط اسمش Grid Area هست.

با استفاده از یه سری ویژگی ها مثل grid-template و gap و … موقعیت آیتم های داخل Grid رو میتونیم تنظیم کنیم.

در کل میشه گفت به دو روش میتونیم از Grid استفاده کنیم:

1. صریح یا Explicit وقتی استفاده میشه که دقیقا میخوایم ستون ها و سطر ها رو از قبل مشخص و تعیین کنیم و تعدادشون مشخصه.

2. ضمنی یا Implicit وقتی استفاده میشه که میخوایم سطر و ستون ها خودکار ایجاد بشن چون تعدادشون از قبل مشخص نیست.

مثال ساده Grid صریح یا Explicit

همونطور که اشاره شد Explicit Grid یعنی میخوایم چیدمان همه آیتم ها رو مشخص کنیم. برای اینکار میتونیم از grid-template-areas استفاده کنیم. تو این مثال یه صفحه با هدر و فوتر و سایدبار و محتوای اصلی، ایجاد می کنیم:

main {
  display: grid;
  grid-template-areas:
    "hd hd hd"
    "ct ct sb"
    "ft ft ft";
}

مقادیری که میبینید مثل hd یا ct دلخواه هستند و هر اسمی خواستید می تونید انتخاب کنید. من برای هدر مخفف hd رو نوشتم و 3 بار تکرارش کردم که یعنی هدر به اندازه 3 ستون عرض میگیره. برای فوتر مخفف ft برای سایدبار sb و برای محتوای اصلی هم ct رو نوشتم.

الان فقط کافیه عناصری که میخوایم در این بخش ها قرار بگیرند رو با grid-area و اسمی که انتخاب کردیم (مثلا hd)، تعیین کنیم:

header { grid-area: hd; }
article { grid-area: ct; }
aside { grid-area: sb; }
footer { grid-area: ft; }

برای قرار دادن فاصله بین آیتم ها از gap و برای تنظیم اندازه سطر و ستون از grid-template-rows و grid-template-columns استفاده می کنیم. مثلا برای اینکه 1rem فاصله بدیم و ارتفاع محتوا و سایدبار 4 برابر هدر و فوتر باشه می تونیم این کد رو به گرید اضافه کنیم:

main {
  ...
  gap: 1rem;
  grid-template-rows: 1fr 4fr 1fr;
}

واحد fr یا fraction به طور خودکار فضا رو به تعداد دلخواه تقسیم میکنه و به هر ستون یا سطر اختصاص میده.

نتیجه رو میتونید تو این کدباکس مشاهده کنید:

مثال ساده Grid ضمنی یا Implicit

حالا فرض کنید لیستی از مطالب داریم که میخوایم با استفاده از grid چیدمان کنیم. اینجا دیگه تعداد آیتم های گرید نامشخصه یعنی مطالب ممکنه 4 تا باشه یا 40 تا باشه به همین خاطر الگوریتم grid میاد بر اساس ویژگی هایی که ما میدیم خودش سطر و ستون های موردنیاز رو ایجاد میکنه. مثلا با استفاده از grid-template-columns تعداد ستون ها رو مشخص میکنیم و هر تعداد مطلب داشته باشیم تعداد سطر ها خودش محاسبه میشه:

main {
  display: grid;
  gap: 1rem;

  grid-template-columns: 1fr 1fr 1fr;
}

توی کد بالا مشخص کردیم که کلا 3 تا ستون میخوایم و مرورگر خودش باید آیتم های داخل grid رو توی 3 ستون تنظیم کنه:

grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);

حالا فرض کنید میخوایم اندازه هر ستون از 120 پیکسل کمتر نشه. برای اینکار میتونیم از تابع minmax استفاده کنیم:

main {
  ...
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

با استفاده از minmax(120px, 1fr) هر ستون حداکثر 1fr میشه ولی از 120px کمتر نمیشه. اگه عرض صفحه کوچیک بود از صفحه میزنه بیرون یا همون overflow میکنه ولی تعداد ستون ها کمتر نمیشه.

برای اینکه تعداد ستون ها هم بسته به عرض صفحه متغیر باشه میتونیم بجای دادن عدد به repeat مقدار auto-fit رو بدیم:

main {
  ...
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

مقدار auto-fit باعث میشه که هم تعداد ستون و هم تعداد سطر خودکار زمان اجرا محاسبه بشه. کد کامل رو توی این کدباکس ببینید:

مثال آیتم های Grid با اندازه های مختلف

اینم یه مثال دیگه برای وقتی هستش که میخوایم اندازه بعضی از آیتم ها با بقیه متفاوت باشه. مثل اکسپلور اینستاگرام یا یه گالری تصویر. استایل خود گرید رو میتونیم به این صورت بنویسیم:

.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  grid-auto-rows: 130px;
}

(راستی با grid-auto-rows ارتفاع همه ی سطر ها رو 130 پیکسل تنظیم کردم)

استایل آیتم های عریض یا مرتفع:

.tall {
  grid-row: span 2 / auto;
}
.wide {
  grid-column: span 2 / auto;
}

کد grid-row: span 2 / auto یعنی ارتفاع این آیتم به اندازه 2 سطر باشه و grid-column هم مثل همون فقط برای عرض آیتم استفاده شده. حالا به هر کدوم از آیتم های داخل گرید کلاس wide بدیم عرضش دو برابر میشه و اگه tall بدیم ارتفاعش دو برابر میشه.

همچنین میتونیم این کلاس ها رو داخل مدیا کوری بنویسیم و ریسپانسیوش کنیم. کد کاملش رو توی این کدباکس ببینید:

منابع CSS Grid

اگه خواستین بیشتر راجع به grid مطالعه کنید این منابع ممکنه به دردتون بخوره: