طراحی و توسعه وب یکی از محبوبترین حوزهها در دنیای فناوری اطلاعات به حساب میآید. ابزارهای مرتبط با این حوزه به سرعت در حال تحول و پیشرفت هستند. HTML و CSS از جمله مهمترین ابزارها و فناوریهای برنامهنویسی وب به شمار میروند. CSS Grid Layouts یک سیستم قالببندی یا طرحبندی (Layout System) دو بُعدی است که به طور خاص برای طراحی رابط کاربری در توسعه وب مورد استفاده قرار میگیرد. در این مقاله، آموزش CSS Grid به طور جامع و رایگان ارائه و به سوالات رایج CSS Grid پاسخ داده شده است. از این مقاله آموزشی میتوان به عنوان راهنمایی برای شروع به کار با CSS Grid استفاده کرد. همچنین دورههای آموزش ویدیویی مرتبط با CSS Grid نیز در این نوشته برای علاقهمندان معرفی شدهاند.
مقدار string>+> برای ویژگی grid-template-area
/
قالب [
مقدار track-size>+>
گریدها (CSS Gridها) ماهیتی اساسی در طراحی چیدمان (طرحبندی | Layout) صفحه وب به حساب میآیند. در طول حیات نسبتاً کوتاه وب، برنامهنویسان انواع روشها و ترفندها را برای جانمایی محتوا در مرورگر آزمایش کردهاند. در ابتدا هیچ روشی برای طرحبندی صفحه وب وجود نداشت. سپس، چیدمانهای جدول گونه به وجود آمدند و به دنبال آن، قالبهای شناور (Float-Based Layouts) معرفی شدند. اما چنین رویکردهایی در بهترین حالت راهحلهایی جایگزین به حساب میآمدند. چون نه جدولها و نه شناورها هیچکدام قرار نبود به عنوان ابزارهای قالببندی (جانمایی) استفاده شوند. پس از این مقدمه، در بخش ابتدایی مقاله آموزش CSS Grid به شرح چیستی CSS Grid پرداخته شده است.
CSS Grid چیست ؟
طرحبندی CSS Grid یک سیستم شبکهای دو بُعدی را برای CSS فراهم میکند. از این فضای مُشبک یا همان Grid میتوان برای طرحبندی نواحی اصلی صفحه یا عناصر کوچک رابط کاربری استفاده کرد. یک Grid مجموعهای از خطهای افقی و عمودی متقاطع است که تعریف کننده سطرها و ستونها هستند. میتوان در داخل این سطرها و ستونها عنصرهایی را قرار داد و جانمایی کرد.
پیشنویس کاری طرحبندی مُشبک سیاساس (CSS Grid Layout) در سال ۱۳۹۰ خورشیدی (۲۰۱۱ میلادی) منتشر شد. سه تن از تهیهکنندگان این پیشنویس از شرکت مایکروسافت بودند. اولین پیشنمایش پلتفرم IE10 با یک پیادهسازی پیشوند CSS Grid به صورت «ms-» ارائه شد. در طول مدت شش سال، تحولاتی در مشخصه CSS Grid بر اساس بازخوردهای دریافت شده و همکاریهای برنامهنویسان و سازندگان مرورگرها به وجود آمد و منجر به پدیدار شدن یک راهکار بومی و موثر برای CSS Grid شد.
CSS Grid یک سری ویژگیهایی (Property | خصیصه | خصوصیت) را ارائه میکند که این Propertyها به برنامهنویسان کمک خواهند کرد تا سازههایی مشبک ایجاد کنند. این Propertyها جانمایی و اندازه اقلام CSS Grid یا همان «آیتمهای CSS Grid» را با استفاده از فناوری CSS تحت مدیریت خود قرار میدهند. این بدین معناست که میتوان «کوئریهای رسانه» (Media Query) را برای «زمینههای» (Contextهای) مختلف به کار گرفت. میتوان چیدمان طرحبندی اقلام CSS Grid را مستقل از «ترتیب منبع» (Source Order) آنها تغییر داد. این خود امکان انتقال اقلام CSS Grid را برای فراهمسازی این Contextهای مختلف، بدون نیاز به تغییر دادن نشانهگذاریهای زیربنایی (کدهای HTML) به وجود میآورد.
الگوریتم جانمایی خودکار در CSS Grid
همچنین، CSS Grid یک الگوریتم جانمایی خودکار را نیز با خود به همراه دارد. این الگوریتم، امکان پُر کردن فضای در دسترس را بدون نیاز به انجام محاسبات زیاد، پدید میآورد. CSS Grid حتی تا حدودی انعطافپذیری در محور Z را هم فراهم میکند. به طوری که، میتوان در صورت نیاز اقلام CSS Grid را روی این محور به صورت همپوشان (متداخل) جانمایی کرد.
ممکن است مفاهیم و توضیحات ارائه شده در این بخش کمی مبهم به نظر برسند. اما، در ادامه توضیحات بیشتری ارائه شده است که به درک بهتر مفاهیم کمک میکنند. در ادامه بخش مربوط به چیستی CSS Grid ، به برخی سوالات رایجی پرداخته شده است که معمولاً پیرامون CSS Grid مطرح میشوند.
Flexbox چیست؟
ماژول جعبه انعطافپذیر (Flexible Box) که معمولاً به آن Flexbox گفته میشود، به عنوان مدل طرحبندی (قالببندی) یک بُعدی و به عنوان مدلی شناخته میشود که میتواند قابلیت توزیع فضا میان آیتمها در یک واسط کاربری را به همراه سایر امکانات قدرتمند ترازبندی ارائه دهد.
Flexbox در هر لحظه با یک بُعد از طرحبندی سر و کار دارد. یعنی با طرحبندی یا به عنوان یک سطر یا به عنوان یک ستون مواجه میشود. Flexbox شباهتهایی با CSS Grid دارد و پیش از پدید آمدن CSS Grid از فلکسباکس استفاده میشد.
از کدام یک باید استفاده کرد، گرید یا فلکس باکس؟
Grid نسبت به Flexbox بسیار جدیدتر است. Grid میتواند کارهایی انجام دهد که Flexbox قادر به انجام آنها نیست. در Flexbox نیز میتوان کارهایی را انجام داد که در CSS Grid امکانپذیر نیستند.
اما میتوان از Flexbox و Grid به صورت همزمان استفاده کرد و از قابلیتهای هر دوی آنها بهرهمند شد. در واقع یک آیتم Grid میتواند یک محفظه یا همان نگهدارنده Flexbox باشد. در ادامه آموزش CSS Grid ، توضیحات لازم در مورد مفاهیم بیان شده، نظیر نگهدارنده و آیتم Grid ارائه شده است.
یادگیری CSS Grid چقدر زمان میبرد؟
به دلیل اینکه CSS Grid با هدف دستیابی به انعطافپذیری بالا خلق شده است و برای کاربردها و موارد استفاده گوناگون و متعددی به کار گرفته میشود، نمیتوان آن را به راحتی و در یک روز آموزش دید و از آن استفاده کرد. آموزش CSS Grid به صرف زمان کافی نیازمند است. اما پس از آن که آشنایی لازم با CSS Grid به وجود آید، به جای درگیری با کدها برای رسیدن به طرحبندی مطلوب، میتوان زمان بیشتری را به طراحی قالبها اختصاص داد.
آیا CSS Grid ارزش یادگیری دارد؟
با کمک CSS Grid میتوان طرحبندیها و قالبهایی را با CSS پیادهسازی کرد که تا پیش از پیدایش CSS Grid غیرممکن یا بسیار دشوار بودهاند. به طور کلی در پاسخ به این سوال که آیا CSS Grid ارزش یادگیری دارد یا خیر، باید گفت که چون CSS Grid اجرای بسیاری از قالبهای CSS را به میزان زیادی سادهتر و خلاصهتر کرده است، به طور قطع یادگیری آن بسیار ارزشمند است.
پیش نیازهای آموزش CSS Grid چیست؟
پیش از شروع آموزش CSS Grid باید آشنایی لازم با فناوری CSS و استایلدهی صفحه وب با استفاده از CSS کسب شده باشد. همچنین، با توجه به اینکه از CSS برای استایلدهی و قالببندی نشانهگذاریهای HTML استفاده میشود، باید با کدنویسی HTML نیز آشنایی کافی وجود داشته باشد.
به طور کلی HTML و CSS از جمله فناوریهای بنیادی در حیطه طراحی و توسعه وب به شمار میروند و از اهمیت ویژهای برخوردار هستند. به ویژه، برای درک مفاهیم و آموزشهای ارائه شده در این مقاله، آشنایی با CSS ضرورت دارد. برای یادگیری CSS Grid یک بازی تحت وب نیز وجود دارد که در ادامه به معرفی آن پرداخته شده است.
بازی Grid Garden یا باغچه گرید چیست؟
باغچه گرید یک بازی تحت وب رایگان است که در آن افراد برای ایجاد یک باغچه هویج، کدهای CSS مینویسند و از این طریق با طرحبندی CSS Grid آشنا میشوند. پس از مطالعه این مقاله و یادگیری CSS Grid ، میتوان به وبسایت باغچه گرید یا همان CSS Garden مراجعه کرد [ّ+] و با انجام این بازی، مفاهیم نظری را به صورت عملی تمرین و تسلط بیشتری را در طرحبندی CSS Grid کسب کرد.
حال پس از پراختن به چیستی CSS Grid و پاسخ به برخی سوالات رایج پیرامون آن، میتوان آموزش CSS Grid را با شرح مفاهیم و اصطلاحات اولیه آن آغاز کرد.
آموزش CSS Grid : مفاهیم و اصطلاحات اولیه
برخی مفاهیم و اصطلاحاتی پیرامون مشخصههای Grid وجود دارند که برای درک و آموزش CSS Grid مورد نیاز هستند. با یادگیری مفاهیم و اصطلاحات مربوطه در آموزش CSS Grid ، میتوان از کارایی و قابلیتهای فناوری CSS Grid به طور کامل بهرهمند شد. به طور پیشفرض، جهت زمینه یک سند HTML از چپ به راست است؛ بنابراین، تمام مثالها در این مقاله برای آموزش CSS Grid با این فرض ارائه شدهاند.
در صورتی که جهت پایه HTML از راست به چپ باشد، مفاهیم بیان شده همچنان صادق هستند؛ با این تفاوت که، جهت جریان بلوکی (Block Flow) راست به چپ خواهد بود که در چنین حالتی، اندیس ۱ در عوض از سمت راست شروع میشود. تغییر نوع نوشتن سند از حالت افقی به حالت عمودی نیز جریان بلوکی را تحت تاثیر قرار خواهد داد.
این مورد نیز در بخش مربوط به ویژگیهای محور-ستونی (Column-Axis) و محور-افقی (Row-axis) توضیح داده خواهد شد. در صورتی که تجربه استفاده از Flexbox وجود داشته باشد، مشابهتهایی در خصوص کاربرد CSS Grid و Flexbox ملاحظه خواهد شد. این شباهت به این صورت است که CSS Grid نیز مانند Flexbox بر اساس فرضیه یک محفظه والد (Parent Container) و عناصر فرزند آن عمل میکند. در CSS Grid از محفظه والد با عنوان «محفظه Grid» یا «Grid Container» نام برده میشود و به عناصر فرزند آن نیز اقلام Grid (آیتمهای گرید | Grid Items) میگویند.
عنصر والد و عنصر فرزند در CSS Grid
در CSS Grid ، به عنصر والد (Parent Element)، نگهدارنده یا همان Container گفته میشود و به عنصر فرزند (Child Element) نیز آیتم (Item) میگویند.
Grid Item چیست ؟
یک نگهدارنده یا محفظه Grid ، شامل تعدادی آیتم Grid است. یک نگهدارنده به طور پیشفرض یک آیتم گرید برای هر ستون در هر سطر دارد. اما میتوان ساختار آیتمهای Grid را به گونهای تنظیم کرد که در چند سطر و ستون گسترش پیدا کنند.
در ادامه آموزش CSS Grid به مفهوم محفظه گرید یا همان Grid Container پرداخته خواهد شد. پیش از آن، به این سوال پاسخ داده شده است که Gride Line چیست؟
Gride Line چیست؟
خطهای Grid یا همان Grid Lineها خطوط افقی و عمودی هستند که پایه و اساس ساختار CSS Grid را تشکیل میدهند. از Grid Lineها برای قرار دادن اقلام روی Grid استفاده میشود. میتوان با اندیسهای عددی به خطوط Grid ارجاع داد که شماره آن از عدد ۱ شروع میشود. خطهای Grid دارای اندیسهای منفی نیز هستند.
اندیسهای منفی امکان ارجاع به خطهای Grid را به وجود میآورند که از انتهای Grid آغاز میشوند. یکی از موارد استفاده اندیسهای منفی، مربوط به زمانی است که نیاز به یک آیتم در ستون انتهایی وجود داشته باشد. صرف نظر از تعداد Trackها، میتوان با تخصیص دادن مقدار -1 به ویژگی «grid-column-end» در آن آیتم، این کار را انجام داد.
.grid-container { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px; } .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }
میتوان Grid Lineها را نامگذاری کرد تا نیازی به شمارش خط گریدی که باید ارجاع داده شود وجود نداشته باشد. این نامها را میتوان به عنوان پارامترهای اختیاری در ویژگیهای grid-template-columns و grid-template-rows تعریف کرد.
.grid-container { display: grid; grid-template-columns: 150px [col-foo] 150px 150px [col-bar]; grid-template-rows: 150px [row-foo] 150px [row-bar]; } .item { grid-column-start: col-foo; grid-column-end: col-bar; grid-row-start: row-foo; grid-row-end: row-bar; }
مفهوم خط Grid در تصویر زیر به طور کاملاً واضح نشان داده شده است:
Grid Track چیست؟
به فضای بین دو خط Grid مجاور، Grid Track (مسیر Grid) گفته میشود. در واقع، Grid Trackها سطرها و ستونهای Grid به حساب میآیند. میتوان از طریق شیار (Gutter) مسیرهای Grid را از یکدیگر جدا کرد. این کار با استفاده از ویژگیهای grid-row-gap و grid-column-gap انجام میشود. مسیرهای سطری و ستونی در تصویر فوق قابل ملاحظه هستند.
Gutter در CSS Grid چیست؟
Gutterها (Alleys | شیارها)، فضاهای بین مسیرها یا همان Trackهای محتوا هستند. میتوان Gutterها را با استفاده از ویژگیهای row-gap ،column-gap با gap ایجاد کرد.
در مثال زیر، یک مسیر گرید سه ستونی با دو سطر ایجاد شده است. فضاهای بین مسیرهای ستونی و مسیرهای سطری در این مثال، ۲۰ پیکسل است:
.wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; }
OneTwoThreeFourFive
خروجی کدهای فوق در این مثال به صورت زیر است:
Grid Cell چیست؟
به فضای بین دو خط گرید سطری مجاور و دو خط گرید ستونی مجاور سلول گرید (Grid Cell) میگویند. Grid Cell به لحاظ مفهومی، مشابه یک سلول جدول است. سلول گرید واحد یکتای Grid به حساب میآید.
.grid-container { display: grid; grid-template-columns: 150px 150px 150px; /* three columns */ grid-template-rows: 150px 150px; /* two rows */ }
Grid Area چیست؟
یک Grid Area ناحیهای متشکل از یک یا بیش از یک سلول گرید است. یک ناحیه گرید به وسیله ۴ خط گرید در هر طرف احاطه میشود. میتوان با استفاده از خطهای گرید احاطه کننده، به یک ناحیه گرید ارجاع داد. همچنین، میتوان با استفاده از نام آن ناحیه گرید به وسیله ویژگی «grid-template-areas» نیز به یک ناحیه گرید ارجاع داد.
سپس، میتوان یک آیتم گرید (Grid Item) را با استفاده از ویژگیهای «grid-placement» مثل grid-row ،grid-area و grid-column یا معادلهای با اندازه بلند آنها تخصیص داد.
.grid-container { display: grid; grid-template-columns: 150px 150px 150px; /* three columns */ grid-template-rows: 150px 150px; /* two rows */ grid-template-areas: "a b b" "a b b"; } .item-1 { grid-area: a; } .item-2 { grid-area: b; }
Grid Container چیست ؟
ساختار Grid نظیر تعداد سطرها و ستونهایی که دارد و اندازه آن سطرها و ستونها به وسیله ویژگیهای اِعمال شده بر محفظه Grid یا همان Grid Container مدیریت میشوند.
جانمایی آیتمهای Grid به وسیله آن دسته از ویژگیهای CSS تعیین میشود که به عنصرهای فرزند در داخل Grid Container نسبت داده شدهاند. یک محفظه Grid را میتوان به وسیله تنظیم ویژگی display با مقدار grid یا inline-grid در یک عنصر تعریف کرد.
تعریف یک محفظه Grid با استفاده از Propertyهای مربوطه، یک زمینه با قالب Grid را برای محتویات آن عنصر به وجود میآورد. زمینه با قالب Grid تنها به عنصرهای فرزند اِعمال میشود و به عنصرهای نوه و فراتر از آن بسط داده نخواهد شد. اگر برنامهنویس مقدار ویژگی display را grid قرار دهد (display: grid)، اقلام (آیتمهای) Grid به صورت پیشفرض در سطرها قرار میگیرند و به طور کامل عرض محفظه Grid را پوشش میدهند:
همچنین در صورتی که مقدار display به صورت inline-grid باشد، خروجی به شکل زیر خواهد بود:
حال در ادامه آموزش CSS Grid و پرداختن به Grid Container، نسبت به معرفی Propertyهای محفظه گرید اقدام شده است.
ویژگیهای مربوط به Grid Container
ویژگیهای مربوط به Grid Container در ادامه این بخش از آموزش CSS Grid فهرست شداند:
- grid-template-columns و grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap and grid-row-gap
- grid-gap
- grid-auto-columns و grid-auto-rows
- grid-auto-flow
- grid
ویژگی grid-gap در نگهدارنده Grid
Property یا همان ویژگی grid-gap میزان خلاء بین سطرها و ستونها را در یک طرحبندی Grid تعیین میکند. این ویژگی، نوع کوتاه شده ویژگیهای زیر به حساب میآید:
- grid-row-gap
- grid-column-gap
باید در نظر داشت که ویژگی grid-gap در CSS3 به «gap» تغییر نام داده شده است. برای مثال، تنظیم فاصله (خلا) بین سطرها و ستونها به اندازه ۵۰ پیکسل به صورت زیر انجام میشود:
.grid-container { grid-gap: 50px; }
ویژگی Order در CSS Grid
ویژگی «order» ترتیب مربوطه برای طرحبندی یک آیتم را در Grid Container تنظیم میکند. آیتمها در یک Container ابتدا با مقدار تعیین شده به صورت صعودی با ویژگی order و سپس به وسیله ترتیب کد منبع خود مرتبسازی میشوند. سینتکس این ویژگی به صورت زیر است:
/*values */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: revert; order: unset;
با توجه به اینکه ویژگی order تنها قرار است ترتیب دیداری عنصرها و نه ترتیب منطقی آنها را تحت تاثیر قرار دهد، نباید از order برای رسانههای غیربصری مثل speech استفاده کرد. مقادیر دریافتی این ویژگی یک عدد صحیح است. این عدد نشان دهنده ترتیب گروهی است که باید توسط آیتم Grid استفاده شود.
Explicit Grid و Implicit Grid چیست؟
Explicit Grid (گرید ضمنی | گرید صریح) گریدی است که با استفاده از ویژگیهای CSS Grid مربوطه نظیر grid-template-columns ،grid-template-rows و grid-template-areas تعریف میشود.
اما اگر یک Grid با دو سطر و سه ستون تعریف و سپس یک آیتم خارج از گرید قرار داده شده باشد، در چنین حالتی، مرورگر یک Implicit Grid (گرید صوری) برای قرار دادن آن آیتم ایجاد میکند.
.grid-container { display: grid; grid-template-columns: 150px 150px 150px; /* three columns */ grid-template-rows: 150px 150px; /* two rows */ } .item { grid-column: 5 / 6; /* grid-column-start: 5; grid-column-end: 6; */ grid-row: 2 / 3; /* grid-row-start: 2; grid-row-end: 3; */ }
در یک Grid ساده ۳ در ۲، خطهای ستونی گرید تنها تا ۴ عدد خواهند بود. اما، در صورتی که یک آیتم در ستون پنجم قرار داده شود، مرورگر دو ستون صوری اضافه خواهد کرد. با قرار دادن مقدار «50px 100px» در ویژگی grid-template-rows، یک مسیر سطری برای هر مقدار تخصیص داده شده ایجاد میشود. مقادیر تعیین کننده اندازه مسیرها میتوانند هر مقدار غیر منفی و هر مقدار با واحد طول (مثل پیکسل، درصد، em و سایر موارد) را داشته باشند. در تصویر زیر، آیتمهای ۱ و ۲ دارای ارتفاعهای ثابت ۵۰ پیکسل و ۱۰۰ پیکسل هستند.
به دلیل اینکه اندازه مسیرها تنها در ۲ آیتم اول و دوم به صورت ضمنی تعریف شدهاند، ارتفاع آیتمهای سوم و چهارم بر اساس محتویات هر یک تعیین خواهند شد. اندازه مسیرهای صوری را میتوان با ویژگیهای grid-auto-columns و grid-auto-rows تعیین کرد. در صورتی که این ویژگیها تنظیم نشوند، مقدار پیشفرض آنها «auto» خواهد بود که منجر به جایگیری در فضای موجود به صورت برابر میشود.
برای سطرهای صوری که محتوایی داخل آنها وجود ندارد، ارتفاع آنها صفر خواهد بود. این مورد مشابه حالتی است که یک عنصر div خالی تعریف شود. یک مسئله جالب در مورد مسیرهای Grid صوری این است که وقتی ایجاد میشوند، آیتمهایی که به طور مشخص جانمایی نشدهاند، متعاقباً بر همین اساس فضا را اشغال میکنند. برای مثال فرض میشود یک Grid دارای ۱۰ عنصر فرزند باشد و این گرید به صورت زیر تعریف شود:
.grid { display: grid; grid-template-columns: 150px 150px; grid-template-rows: 150px 150px; grid-auto-columns: 50px 75px; grid-auto-flow: column; } .item { grid-column: 8; }
با قرار دادن یک آیتم Grid در خط هشتم، مرورگر شش ستون صوری گرید دیگر را نیز بر اساس مقادیر ویژگی grid-auto-columns تولید میکند. سپس، آیتمهایی که به طور مشخص جانمایی نشدهاند، مسیرهای صوری را بر اساس آن پر خواهند کرد.
Fr در CSS Grid چیست؟
«fr» در CSS Grid یک واحد اندازهگیری طول و مخفف عبارت «Fraction» به معنی «کسر» است. یک واحد Fr واحدی است که کسری از فضای در دسترس در Grid Container یا همان محفظه Grid را نمایندگی میکند. در ادامه و بخش بعدی آموزش CSS Grid ، نقش fr دقیقتر مشخص خواهد شد.
ویژگیهای Grid Container
در این بخش از آموزش CSS Grid ، هر یک از ویژگیهای مرتبط با Grid Container معرفی و شرح داده شدهاند. در ابتدا به معرفی دو ویژگی grid-template-columns و grid-template-rows پرداخته شده است.
ویژگیهای grid-template-columns و grid-template-rows
grid-template-columns: none || grid-template-rows: none | |
این دو ویژگی، اندازه مسیرهای Grid و اسامی خطها را تعیین میکنند. مقدار ویژگی به صورت یک فهرست جداسازی شده با فاصله نشان داده میشود که به آن «Track List» (فهرست مسیرها) میگویند. ویژگی grid-template-columns فهرست مسیر برای تمام ستونها را در گرید تعریف میکند. همچنین، ویژگی grid-template-rows معرف فهرست مسیرها برای تمام سطرها در Grid است. تعریف نام خطها اختیاری است. به دلیل اینکه Gridها به گونهای ساخته شدهاند که بسیار انعطافپذیر باشند؛ از این لحاظ که توسعهدهندگان بتوانند گریدهای بسیار شخصیسازی شدهای را تعریف کنند.
بنابراین، انتخابهای بسیاری برای تعریف مقادیر ویژگیهای grid-template-columns و grid-template-rows وجود دارد. در ادامه این بخش از آموزش CSS Grid به معرفی و توصیف مقادیر ممکن و انواع سینتکسهای این دو ویژگی پرداخته شده است. مقدار none همان مقدار اولیه در زمانی است که هیچ مسیر گرید مشخصی ایجاد نشده باشد.
[? [ | ] ]+ ?
- minmax(
, ) - fit-content(
)
در ادامه، هر یک از روشهای اول و دوم شرح داده شدهاند:
۱-
- میتواند یک CSS Length یا درصد باشد؛ مثل 250px یا 20%
- میتواند طول انعطافپذیری داشته باشد که با استفاده از واحد fr تعریف میشود. واحد fr بخشی از فضای آزاد باقیمانده را متناسب با عامل انعطافپذیر (Flex Factor) خود اشغال میکند. برای مثال، با داشتن یک Grid Container با اندازه 750px با سه ستون 150px، به ترتیب 1fr و 2fr تعریف میشوند. ستونهایی که به صورت انعطافپذیر اندازهبندی شدهاند، 600px باقیمانده را در نسبت 1:2 اشغال خواهند کرد، به طوری که دومین ستون 200px و سومین ستون 400px فضا اشغال خواهد کرد.
.grid { display: grid; width: 750px; grid-template-columns: 150px 1fr 2fr; }
- میتواند کلمه کلیدی min-content باشد که کوچکترین اندازه ممکنی است که به سربار منجر نمیشود.
- میتواند کلمه کلیدی max-content باشد که مقدار اندازه کمینه مورد نیاز برای احاطه کردن محتویات است.
- میتواند کلمه کلیدی auto باشد که فضای در دسترس باقیمانده را پر خواهد کرد.
.grid { display: grid; grid-template-columns: min-content max-content auto; }
۲- minmax(
repeat( [] , [ ? ]+ ? )
در صورتی که نیاز به الگوی ستون باریک 30px و یک ستون عریض 100px باشد که باید چهار بار تکرار شود، دو راه برای تعریف چنین حالتی وجود دارد:
grid-template-columns: 30px 100px 30px 100px 30px 100px 30px 100px; /* same as above but with the repeat() function */ grid-template-columns: repeat(4, 30px 100px);
grid-template-columns: [first sidebar-start] 150px [content-start] 1fr [last]; grid-template-rows: [first header-start] 50px [content-start] 1fr [footer-start] 50px [last];
[ ? [ | ] ]* ?
در ادامه این بخش از آموزش CSS Grid ، هر یک از مشخصههای شرح داده شدهاند:
: سه روش در تعریف وجود دارد:
: میتواند هر نوع مقدار CSS length یا مقدار درصدی باشد.
- minmax(
,) : میتواند بازهای تعریف شده توسط تابع minmax() باشد که اولی مقدار کمینه و دومی، مقدار بیشینه است. برای این مورد، مقدار کمینه باید یک باشد، در حالی که مقدار بیشینه میتواند هر مقدار مجازی برایانتخاب شود.
- minmax(
, ) : میتواند محدودهای باشد که مطابق آنچه تنظیم شود که در تابع minmax() تعریف میشود. اولین مقدار، کمینه و دومین مقدار، بیشینه است. در این مورد، مقدار کمینه نمیتواند یک واحد انعطافپذیر باشد. در حالی که، مقدار بیشینه باید یک باشد.
: سینتکس استفاده از به صورت زیر است:
repeat( [ ] , [ ? ]+ ? )
با استفاده از نشانهگذاری یا تابع repeat()، میتوان گریدی ایجاد کرد که در آن امکان تعیین تعداد دفعات نیاز به تکرار یک ستون یا سطر گرید با اندازه ثابت وجود داشته باشد.
: سینتکس استفاده از به صورت زیر است:
repeat( [ auto-fill | auto-fit ] , [ ? ]+ ? )
با استفاده از نشانهگذاری repeat() ، میتوان گریدی را ایجاد کرد که یک ستون یا سطر گرید با اندازه ثابت برای پر کردن فضای آزاد در آن تکرار شود. کلمه کلیدی auto-fill ، برای پر کردن فضای آزاد بدون ایجاد سربار در گرید به تعداد نیاز ستون تولید میکند.
فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در تم آف
کلیک کنید
همچنین، کلمه کلیدی auto-fit نیز به گونه مشابهی عمل میکند؛ با این تفاوت که، auto-fit هر نوع مسیر (Track) خالی تکرار شده (با اندازه 0px) را حذف میکند.
ویژگی grid-template-area
سینتکس استفاده از این ویژگی (خصیصه | Property) به صورت زیر است:
grid-template-areas: none | +
این ویژگی محدودههای گریدهای نامگذاری شده را تعریف میکند و یک ساختار بصری از Grid فراهم میسازد. این ساختار میتواند به درک کدهای زیربنایی کمک کند. در ادامه، هر یک از مقادیر انتخابی ممکن برای این Property شرح داده شدهاند.
مقدار none برای ویژگی grid-template-area
none مقدار اولیه است. هیچ مسیر گریدی ایجاد نمیشود و بنابراین، هیچ محدوده Grid نامگذاری شدهای تعریف نخواهد شد.
فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در تم آف
کلیک کنید
.grid-container {
display: grid;
grid-template-areas: "logo stats"
"score stats"
"board board"
"... controls";
}
سپس، میتوان آیتمهای Grid را مطابق کدهای زیر به این نواحی نامگذاری شده تخصیص داد:
.logo { grid-area: logo; }
.score { grid-area: score; }
.stats { grid-area: stats; }
.board { grid-area: board; }
.controls { grid-area: controls; }
ویژگی grid-template
سینتکس استفاده از ویژگی grid-template به صورت زیر است:
grid-template: none | [ / ] | [ ? ? ? ]+ [ / ]?
ویژگی grid-template نوع مختصر شدهای برای ، و در یک تعریف یکتا به حساب میآید. در ادامه این بخش، مقادیر و فرمهای نحوی ممکن برای این ویژگی بیان و شرح داده شدهاند. به مانند ویژگیهایی که پیشتر معرفی شدند، مقدار none هر سه ویژگی نام برده شده را به مقدار اولیه که none (هیچ) است، تغییر میدهد.
فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در تم آف
کلیک کنید
سپس، میتوان آیتمهای Grid را مطابق کدهای زیر به این نواحی نامگذاری شده تخصیص داد:
.logo { grid-area: logo; } .score { grid-area: score; } .stats { grid-area: stats; } .board { grid-area: board; } .controls { grid-area: controls; }
ویژگی grid-template
سینتکس استفاده از ویژگی grid-template به صورت زیر است:
grid-template: none | [ / ] | [? ? ? ]+ [ / ]?
ویژگی grid-template نوع مختصر شدهای برای ، و در یک تعریف یکتا به حساب میآید. در ادامه این بخش، مقادیر و فرمهای نحوی ممکن برای این ویژگی بیان و شرح داده شدهاند. به مانند ویژگیهایی که پیشتر معرفی شدند، مقدار none هر سه ویژگی نام برده شده را به مقدار اولیه که none (هیچ) است، تغییر میدهد.