چیدمان CSS Grid
از Bricks 1.6.1، CSS grid به شما اجازه میدهد layout های دو بعدی (ستون و ردیف) بسازید. در حالی که CSS flexbox، که Bricks از آن بهعنوان مدل layout پیشفرض استفاده میکند، برای layout های یکبعدی (ستون یا ردیف) طراحی شده است.
ساخت grid layout
میتوانید هر المان layout (section، container، block، div) را با تنظیم مقدار Display روی grid به CSS grid layout تبدیل کنید. این المان Grid Container شما است.
هر فرزند مستقیم grid container یک Grid Item است، با تنظیمات اضافی برای Grid column و Grid row تا یک item را درون grid قرار دهد.
هنگام ویرایش یک grid container در سازنده، یک grid overlay قابل مشاهده میشود که grid cell ها را نشان میدهد. کلیک روی آیکون المان action چهار مربع کوچک اجازه میدهد این overlay را show/hide کنید.
همانطور که در screenshot بالا میبینید، grid item ها بهطور پیشفرض در ردیفها چیده میشوند و عرض کامل grid container را پوشش میدهند. که خودش قدرت واقعی CSS grid را آزاد نمیکند، تا اینکه شروع کنید به ...
تنظیم track های ستون و ردیف (explicit grid)
پس از ساخت grid container، زمان تعریف track های ستون و ردیف grid است.
میتوانیم این کار را بهصورت explicit از طریق تنظیمات Grid template columns (grid-template-columns) و Grid template rows (grid-template-rows) grid container انجام دهیم.
بیایید چند مثال را با هم بررسی کنیم ...
***grid-template-columns: 200px 1fr 2fr***
هر مقدار property grid-template-columns یک column track میسازد.
مثال بالا یک layout grid سه ستونه میسازد.
ستون ۱ عرض ثابت 200px دارد. ستون ۲ 1fr و ستون ۳ 2fr عرض دارد.
**fr** یک واحد انعطافپذیر جدید است، که fractional unit نامیده میشود، که x بخش از فضای موجود را اشغال میکند.
fr چطور محاسبه میشود؟
فرض کنید grid container ما عرض 1100px دارد (عرض پیشفرض container).
ابتدا باید همه مقادیر غیر-fr و gap ها را کم کنیم: پس منهای عرض ثابت 200px ستون ۱، عرض موجود باقیمانده 900px است.
در مجموع ۳ واحد fractional داریم (1fr از ستون ۲ بهعلاوه 2fr از ستون ۳) که باید فضای باقیمانده به آنها اختصاص داده شود.
یعنی 1fr برابر 300px است (= 900px / 3). پس ستون ۲ عرض 300px دارد (= 1fr × 300px) و ستون ۳ عرض 600px (= 2fr × 300px) دارد.
***grid-template-rows: 100px 300px***
هر مقدار property grid-template-rows یک row track میسازد.
مثال بالا بهصورت explicit دو ردیف اول را تعریف میکند. ردیف ۱ ارتفاع 100px و ردیف ۲ ارتفاع 300px دارد.
از آنجایی که ارتفاع تنها برای دو ردیف اول بهصورت explicit تعریف کردیم، ارتفاع هر ردیف بعد از ردیف ۲ بهطور پیشفرض توسط ارتفاع محتوایش تعیین میشود. میتوانیم این رفتار را با ساختن یک implicit grid تغییر دهیم ...
Implicit grid
grid container بهطور خودکار track های اضافی (ستون و ردیف) برای grid item هایی که خارج از grid explicit تعریفشدهتان قرار میگیرند میسازد. این implicit grid نامیده میشود.
میتوانید اندازههای ستون و ردیف این implicit grid را از طریق تنظیمات Grid auto columns (grid-auto-columns) و Grid auto rows (grid-auto-rows) grid container تعریف کنید.
اندازههای مینیمم و ماکزیمم track
تابع CSS minmax به شما اجازه میدهد یک اندازه track مینیمم و ماکزیمم تنظیم کنید.
دو آرگومان میپذیرد. اولی مقدار مینیمم و دومیمقدار ماکزیمم track grid شماست.
grid-template-columns: repeat(3, minmax(200px, 1fr))
یک grid سه ستونه explicit میسازد که هر grid item حداقل عرض 200px و حداکثر عرض 1fr دارد.
مشکل این نوع grid explicit این است که responsive نیست. وقتی viewport کمتر از 600px عرض دارد overflow میکند (۳ ستون با حداقل 200px) و تعداد ستونها بهصورت out-of-the-box با breakpoint های مختلف تنظیم نمیشود.
کلیدواژههای auto-fill و auto-fit
میتوانیم از کلیدواژههای auto-fill یا auto-fit برای رفع آن مشکلات responsive استفاده کنیم. که به ما اجازه میدهد grid layout های responsive بدون media query بسازیم.
پس بهجای تنظیم یک grid سه ستونه explicit، از کلیدواژه auto-fill یا auto-fit اینطور استفاده میکنیم:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
کدام کلیدواژه استفاده شود به رفتار مورد نظر بستگی دارد. auto-fit grid item ها را برای پر کردن فضای موجود expand میکند. در حالی که auto-fill این کار را نمیکند (فضای موجود را نگه میدارد).
تکرار اندازه track
تابع CSS repeat به شما اجازه میدهد یک الگوی اندازه track تکرارشونده را در قالب فشرده تعریف کنید.
دو آرگومان میپذیرد. اولی تعداد دفعاتی است که track باید تکرار شود و دومیتعریف track هاست.
grid-template-columns: repeat(3, 1fr)
یک grid سه ستونه explicit میسازد.
grid-template-rows: 100px repeat(2, 1fr) 200px
یک grid چهار ردیفه explicit میسازد. که ردیف ۱ ارتفاع 100px، ردیف ۲ و ۳ هرکدام 1fr و ردیف ۴ ارتفاع 200px دارد.
قرارگیری grid item ها (با شماره line)
Grid line ها شروع یا پایان یک column یا row track را مشخص میکنند. شمارش از ۱ شروع میشود.
میتوانیم از آن شماره line ها برای قرار دادن یک grid item روی grid استفاده کنیم.
مثال زیر یک layout grid سه ستونه explicit را نشان میدهد که grid item هایش سه ردیف را پوشش میدهند.
این یعنی این grid ۴ column line و ۴ row line دارد.
بررسی grid layout هر وبسایت با کلیک روی دکمه grid آبی کوچک کنار element node در مرورگر، در این مورد Chrome، grid line ها را هم نشان میدهد:
در مثال بالا Grid Item 2 را از طریق تنظیمات Grid column (grid-column) و Grid row (grid-row) اینطور قرار دادیم تا دو ستون و دو ردیف را اشغال کند:
تنظیمات Grid column و Grid row برای همه grid item ها (فرزندان مستقیم grid container) در دسترس هستند.
Syntax: مقدار اول line شروع را مشخص میکند. بعد از یک اسلش (/). بعد از آن مقدار دوم که line پایان را مشخص میکند.
در مثال بالا Grid column را روی «2 / 4» تنظیم کردیم. به grid میگوییم میخواهیم Grid Item 2 از column line 2 شروع و در column line 4 تمام شود. Grid row روی «1 / 3» تنظیم شده، یعنی Grid Item 2 در row line 1 شروع و در row line 3 تمام میشود.
میتوانستیم همان layout را با تنظیم Grid column و Grid row روی «span 2» بهدست آوریم. span یک کلیدواژه است که به grid layout میگوید item باید چند ستون یا ردیف span کند.
یادداشتها
Named grid area ها (grid-template-areas) باید از طریق CSS سفارشی تعریف شوند.
قرار دادن grid item ها داخل یک query loop بهتر است از طریق CSS سفارشی nth-child انجام شود.
این مقاله قصد دارد یک مرور کلی از CSS grid ارائه دهد، نه یک مرجع کامل. توصیه میکنیم منابع لینکشده زیر را برای یادگیری بیشتر درباره CSS grid دنبال کنید.
منابع بیشتر
- A Complete Guide to CSS Grid (توسط CSS-Tricks)
- learncssgrid.com (مرور کلی جامع CSS grid)
- cssgrid.io (دوره رایگان CSS grid توسط Wes Bos)