برای چیدمان المان ها در یک صفحه وب، راه هایی مثل استفاده از float یا flex در css وجود دارد و راهکار دیگر استفاده از grid است. grid در لغت به معنای توری است و در کدنویسی وب سایت ها برای چیدمان دو بعدی به کار می آید.
ماژول CSS grid به توسعه دهندگان وب کمک می‌کند طرح‌های پیچیده واکنش‌گرا یا Responsive را راحت‌تر پیاده‌سازی کنند. grid این امکان را می‌دهد که هنگام طراحی صفحات وب بتوان صفحه را به بخش‌های مختلف تقسیم کرد به‌گونه‌ای که این بخش‌ها با یکدیگر تداخل نداشته باشند.
برای استفاده از grid ابتدا یک grid container می سازیم. یعنی المنت هایی که می خواهیم آنها را بچینیم، داخل یک ظرف می ریزیم. به معنای دقیق تر همه آنها را داخل یک المنت والد قرار می دهیم و در CSS مربوط به آن، دستور display:grid; را قرار می دهیم.
برای یادگیری استفاده از grid باید کاربرد دستورات زیر را بیاموزیم:
grid-template-columns
grid-template-rows
grid-column
grid-row
justify-self
align-self
دو خاصیت اول به والد و خاصیت های بعدی به فرزندان تعلق می گیرد. برای یادگیری راحت تر به مثال زیر توجه کنید:
نتیجه این کد به این شکل است:
می بینید که دستور display: grid; در این مرحله عمل نمی کند و نتیجه شبیه دستور display:block; می باشد. برای حل این مشکل باید دستورات سطر یا ستون یا هر دو را به css عنصر والداضافه کنیم:
.parent{
display: grid;
grid-template-columns: 200px 400px 300px;
}
با استفاده از خاصیت grid-template-columns می توانیم ستون هایی را در صفحه به وجود آوریم. در اینجا سه مقدار به این خاصیت دادیم، پس سه ستون ایجاد شد که عرض ستون اول 200px، عرض ستون دوم 400px و عرض ستون سوم 300px است.
می توانیم به جای مقدار از درصد استفاده کنیم، مثلا به شکل زیر:
grid-template-columns: 40% 10% 30%;
نتیجه به این شکل می شود:
راه سوم مقداردهی استفاده از fr است. این عبارت مخفف کلمه fraction به معنای سهم یا کسر است:
grid-template-columns: 2fr 1fr 3fr;
در این شرایط عرض صفحه به 6 قسمت (6=3+1+2) تقسیم می شود، آنهایی که در ستون اول قرار می گیرند، 2/6 عرض صفحه را به خود اختصاص می دهند، ستونی دومی ها 1/6 و ستون سومی ها 3/6 عرض صفحه را در اختیار می گیرند. نتیجه به این شکل است:
حال می خواهیم اندازه ها را بر اساس سطر بچنیم. شرایط مشابه ستون است و تنها تفاوت در زمانی است که بخواهیم از fraction یا درصد استفاده کنیم. در این شرایط باید ابتدا به والد خاصیت ارتفاع بدهیم. در این زمینه یک مثال می زنیم:
.parent{
display: grid;
height:600px;
grid-template-rows: 2fr 1fr 3fr 1fr 2fr 3fr 1fr 2fr 4fr;
}
در این شرایط 600 پیکسل به 19 قسمت تقسیم می شود و هر سطر، ارتفاعی به اندازه ضریبی از 19 می گیرد
همانطور که می بینید تعداد باکس ها زیاد است و می تواند بیش از این هم باشد، در این شرایط اگر بخواهیم کاری را تکرار کنیم از دستور repeat استفاده می کنیم:
grid-template-columns: repeat(3 , 1fr) ;
در اینجا سه ستون ایجاد می کند:
برای کار با سلول های grid باید با مفاهیم line ، span <number> ، span <name> و auto آشنایی داشته باشیم تا بتوانیم یک item را تعریف کنیم. تصویر زیر یک جدول 3 سطری و 5 ستونی است. به هر کدام از خط هایی که برای ساخت این جدول ساخته شده یک Line می گویند. از span ها نیز برای تعیین گسترش فضا استفاده می کنیم. auto نیز نشان دهنده قرارگیری خودکار، بازه خودکار یا بازه پیش فرض است.
حال یک item را بر اساس دستور زیر تعریف می کنیم:
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
{
خاصیت های grid-column و grid-row به فرزندان اختصاص پیدا می کنند. می توان به صورت های دیگری نیز آنها را نوشت:
مثلا می خواهیم عرض رنگ قرمز دو برابر شود. اینگونه می نویسیم:
grid-column: 1/3;
این نوشته به این معناست که این ستون از line 1 تا line 3 ادامه پیدا کند. به شکل زیر:
این دو که به فرزندان داده می شوند، برای تراز افقی یا عمودی محتوای داخل آیتم ها کاربرد دارند و مقادیر start ، center و end می گیرند.
.gridbox3{
background-color: green;
justify-self: center;
align-self: start;
}
نتیجه به این شکل است:
در اینجا محتوای سلول سبز را در راستای افقی وسط چین، و در راستای عمودی بالا چین کردیم.
خاصیت Grid به طور کلی خاصیت block بودن را دارد یعنی تا انتهای سطر را می گیرد، اگر بخواهیم از grid بدون این خاصیت استفاده کنیم، سراغ inline-grid می رویم:
display: inline-grid;
هر چند CSS grid به عنوان یکی از استانداردهای وب شناخته نشده است، اما از اکتبر سال 2017 به بعد مرورگرهای گوگل کروم، فایرفاکس، سافاری، اپرا و Microsoft edge همگی از CSS grid پشتیبانی می‌کنند.
