بریم سر اصل مطلب. CSS Grid چیه و چرا مهمه ؟

خوب Grid سی اس اس اولین سیستم واقعی طرح بندی(Layout) وب است.این سیستم طراحی شده است تا محتویات را هم به صورت ردیفی و هم ستونی سازماندهی کند و کنترل بالایی برای طراح در این زمینه ایجاد کند. پس ما را از شر هک ها و راه حل های مختلفی که برای این کار استفاده می کنیم خلاص می کند و در نتیجه ایجاد طرح های پیچیده و تایپ های زیبا نه تنها ممکن شده بلکه آسان و قابل دستکاری تر هم شده است.

خلاصه با CSS Grid ، وب مکانی بسیار زیباتر از چیزی خواهد بود که ما به آن عادت کرده ایم.

خوب اینها درست ولی CSS Grid چطور کار می کنه؟ مقالات پیچیده زیادی در این مورد وجود دارند که به شدت وارد جزئیات شده اند ولی فکر کنم بهتره از موارد ساده شروع کنیم. چیزی که ما می خواهیم اینجا روی ان کار کنیم نمونه ساده ای است که از حروف الفبا استفاده می کند.

برای شروع کدهای HTML را اضافه می کنیم:

<div class='wrapper'>
<div class='letter'>
A
</div>
<div class='letter'>
B
</div>
</div>

اول از همه به حروف بالا کمی استایل می دهیم مثلا font-size و color و بعد این حروف را با استفاده از خصیصه های flexbox مثل align-items و  justify-content، در مرکز div ها قرار می دهیم. , و بله، درست گفتیم! CSS Grid تداخلی با دستورات flexbox ندارد و جایگزین آنها نمی شود. حتی می توانیم خیلی از این خصیصه ها را به صورت یکپارچه با CSS Grid استفاده کنیم.ولی فعلا بر می گردیم سراغ نمونه خودمان:

در این نمونه که می بینید ما دو div ساده داریم که زیر هم قرار گرفته اند چون تگ div به صورت پیش فرض خصیصه display: block دارد. حالا کاری می کنیم والد این div ها از نوع CSS Grid باشد:

.wrapper {
display: grid;
}

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

See the Pen Type Specimen Grid Demo – 1 by Robin Rendle (@robinrendle) on CodePen.

همانطور که می بینید فعلا اتفاق خاصی نیفتاده است. بر خلاف display: inline-block; یا display: inline; که بلافاصله تغییر حالت شان قابل دیدن است، برای اینکه grid ما کاری انجام دهد که شبیه کار باشد، باید اول تعداد مشخصی از ستون ها یا سطر ها را برایش مشخص کنیم.در این مثال خودمان فقط حروف را در دو ستون کنار هم می آوریم:

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1px;
background-color: black;
}

خوب در کد بالا چه کردیم؟ اول ما دو ستون با grid-template-columns ایجاد کردیم. 1fr احتمالا خیلی عجیب و غریب به نظر می رسد اگر قبلا آن را ندیده باشید ولی این یک واحد معتبر در CSS است که می گوید هر ستون باید یک fraction از grid ما باشد.در مورد کد ما باعث می شود 2 ستون با عرض یکسان داشته باشیم.

پس تا اینجا نمونه ما به این شکل است:

See the Pen Type Specimen Grid Demo – 2 by Robin Rendle (@robinrendle) on CodePen.

تبریک! بالاخره کار کرد. ولی فاصله عجیب بین دو ستون را می بینید؟ این در واقع پس زمینه wrapper است چون ما خصیصه grid-column-gap را مساوی 1px قرار داده ایم.

حالا فرض کنید بخواهیم دو حرف دیگر هم اضافه کنیم.خوب طرح ما چه تغییری خواهد کرد؟

<div class='wrapper'>
<div class='letter'>
A
</div>
<div class='letter'>
B
</div>
<div class='letter'>
C
</div>
<div class='letter'>
D
</div>
</div>

خوب به صورت تکنیکی تغییر خاصی نخواهد کرد – ما قبلا به grid گفته ایم که دو ستون داشته باشد بنابراین دو حرف جدید در زیر 2 ستون قبلی با عرض 1fr قرار می گیرند:

See the Pen Type Specimen Grid Demo – 3 by Robin Rendle (@robinrendle) on CodePen.

حالا اینجا مسئله عجیبی هست. چرا فاصله 1px که در بالا بحث شد بین A و C و همچنین B و D وجود ندارد؟ چونکه grid-column-gap فقط برای ستون هاست و برای ایجاد فاصله بین سطر ها باید از خصیصه grid-row-gap استفاده کنیم:

.wrapper {
grid-column-gap: 1px;
grid-row-gap: 1px;
/* other styles go here */
/* we could have also used the shorthand `grid-gap` */
}

و بعد از این تغییر نتیجه به این شکل خواهد بود:

See the Pen Type Specimen Grid Demo – 4 by Robin Rendle (@robinrendle) on CodePen.

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

.wrapper {
grid-template-columns: 1fr 1fr 1fr;
}

خوب ما یک ستون دیگر ایجاد کردیم و دقت کنید الان می توانیم پس زمینه بخش زیادی از wrapper را ببینیم چون تعداد فرزندان برای پر کردن همه بخش های آن کافی نیست:

See the Pen Type Specimen Grid Demo – 5 by Robin Rendle (@robinrendle) on CodePen.

و اگر ما یکی از مقادیر fr آن خصیصه را تغییر دهیم به راحتی می توانیم grid نا متقارن (asymmetric) ایجاد کنیم.فرض کنید می خواهیم ستون اول ما به اندازه 3 برابر ستون های دیگر عریض باشد:

.wrapper {
grid-template-columns: 3fr 1fr 1fr;
}

ستون های A و D الان از دو ستون دیگر بزرگتر خواهند بود:

See the Pen Type Specimen Grid Demo – 6 by Robin Rendle (@robinrendle) on CodePen.

خوب قابلیت قدرتمندی نیست؟ دیگر نیازی نیست برای margin و padding یا عرض تک تک ستون ها نگران باشیم. حالا می توانیم grid های خیلی پیچیده را بدون انجام محاسبات ریاضی ایجاد کنیم کاری که در گذشته امکانش نبود.

ولی شاید بپرسید در مورد grid های واکنش گرا(responsive) چطور؟ عوض کردن مقدار خصیصه فوق داخل media query ها کار بسیار ساده ای است.فرض کنید می خواهیم تعداد ستون های پیش فرض ما 2 باشد، و از 500px به بالاتر تعداد ستون ها 3 عدد باشند و در نهایت در صفحه نمایش های بزرگتر، ما 4 ستون داشته باشیم.همه کدی که باید برای این کار بنویسیم این است:

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;

@media screen and (min-width: 500px) {
grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (min-width: 800px) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

برای دیدن دمو می توانید این لینک را در تب جدید باز کنید و سایز پنجره مرورگر را مطابق شکل زیر کم و زیاد کنید تا کارکرد grid در حالت واکنش گرا را ببینید!

بنابراین خصیصه grid-template-columns می توانید خیلی پیچیده تر از چیزی باشد که اینجا دیدید ولی این نقطه شروع خوبی بود. حالا باید در مورد خصیصه واقعا زندگی بخش grid-template-rows یاد بگیریم.

کد زیر را در نظر بگیرید:

.wrapper {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-rows: 1fr 3fr;
}

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

See the Pen Type Specimen Grid Demo – 8 by Robin Rendle (@robinrendle) on CodePen.

با اینکه به نظر ساده می رسد ولی قبلا هیچ وقت مثل این قادر نبودیم این کار را انجام دهیم. همیشه مجبور بودیم از روش های مختلف مثل min-height یا تغییر کلاس استفاده کنیم. ولی هیچگاه قادر نبودیم بین ردیف ها مثل این ارتباط برقرار کنیم و این چیزی است که CSS Grid را قدرتمند می کند.

با این دانش کمی که یاد گرفتیم و خصیصه های کاربردی ، ما توانیم طرح بندی ها افسانه ای ایجاد کنیم که طرح بندی های نا متقارن و grid واکنش گرا فقط بخش کوچکی از آن است.

پشتیبانی مرورگرها از CSS Grid

نحوه پشتیبانی مرورگرهای مختلف از CSS Grid از سایت caniuse برگرفته شده است. عدد ها بیانگر پشتیبانی از آن نسخه و نسخه های بالاتر هستند.

منبع