CSS Grid قوی‌ترین سیستم موجود لایه‌بندی در CSS است. سیستم CSS Grid یک ابزار لایه‌بندی دو بعدی را با توانایی قرار دادن آیتم‌ها در ردیف‌ها و ستون‌ها در وب ایجاد کرده است. اهمیت grids در طراحی وب مدرن، چنان بالاست که این ویژگی، بسیاری از مشکلات قدیمی در مورد لایه‌بندی عناصر در مرورگرها را حل می‌کند.

قبل از این‌که شروع کنیم، بدانید که این مقاله آموزشی قرار نیست خیلی جامع باشد و می‌خواهیم در مورد اصول پایه این مبحث صحبت کنیم، پس اگر می‌خواهید بیشتر بدانید و درکی عمیق‌تر از CSS Grids داشته باشید بهتر است به سراغ مقالاتی دیگر در این باره بروید.

پشتیبانی مرورگر

CSS Grids تنها در آخرین نسخه از مرورگرهای فایرفاکس و کروم معرفی شده است. اینترنت اکسپلورر ۱۰ و ۱۱ نیز از آن پشتیبانی می‌کند، اما اجرای آن بسیار قدیمی و با ترکیبی از مد افتاده صورت می‌گیرد.

Basic Grid

ابتدا باید اطمینان حاصل کنیم که یک grid container و داخل آن نیز تمامی عناصر child را داشته باشیم. از این‌رو تمامی این باکس‌ها که children direct این grid هستند باید بر اساس همان grid مرتب شوند.

<div class="grid">
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
</div>

حالا container را انتخاب می‌کنیم که می‌خواهیم آن را به یک grid تبدیل کنیم. تمامی ویژگی‌های مورد نیاز را به آن اضافه کرده و کار هرکدام از این ویژگی‌ها را تشریح خواهیم کرد. برای درکی بهتر، همه‌چیز را با تصویر که هر خط از کدها را نشان می‌دهد ارائه می‌دهیم.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
 
.grid__item {
  width: 100%;
  height: 200px;
  background: skyblue;
}

در ادامه چیزی که از این دو خط به دست می‌آوریم را نشان می‌دهیم:

اکنون برای ساخت ردیف و ستون از دو ویژگی متفاوت استفاده می‌کنیم.

اولین مورد grid-template-columns است. چیزی که در اینجا داریم همه آن مواردی است که برای یک (value (px, rem, em لازم است. در CSS Grid، یک value / unit جدید وجود دارد که با نام fr معرفی می‌شود. Fr معادل کوتاه شده «کسر» (fraction) است. یک Fr فضای خالی را پر می‌کند. در این مورد ما ۴ <strong>fr داریم که ۴ برابر فضای خالی را پر می‌کند.

---

مقاله مرتبط: نحوه کار سیستم گریدبندی (Grid) در بوت استرپ ٤

---

یک راه دیگر برای نوشتن این خط استفاده از اختصار نویسی است.

;(grid-template-columns: repeat(4, 1fr

یک ویژگی دیگر grid-template-rows است. ۴ عنصر دیگر در grid و می‌توانیم این ویژگی جدید CSS  را بدین شکل اضافه کنیم.

<div class="grid">
 <!-- First Row -->
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 
 <!-- Second Row -->
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
 <div class="grid__item"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 1.5em;
}

برای فضای خالی بین آن‌ها از چیزی که grid-gap نامیده می‌شود، استفاده کرده‌ایم، این نسخه کوتاه است که شکاف بین ستون‌ها و ردیف‌ها را ایجاد کرده و آن‌ها را یکپارچه ساخته است؛ اما اگر می‌خواهید به‌صورت جداگانه از آن‌ها استفاده کنید، می‌توانید از grid-column-gap و grid-row استفاده کنید. با این روش یک ساختار زیبا و منظم را ایجاد کرده‌ایم.

به یاد داشته باشید که شکاف در درون ستون است؛ این شکاف حاشیه‌ای در قسمت بیرونی شبکه ایجاد نمی‌کند. می‌توانید هرچقدر فضا که نیاز دارید در بیرون از container grid داشته باشید.

نتیجه‌گیری

سیستم لایه‌بندی CSS Grid به شما امکان می‌دهد که لایه‌بندی‌های طراحی وب پیچیده‌ای را به‌آسانی ایجاد کنید، درحالی‌که کدهای CSS ساده‌تر و قابل نگهداری بنویسید. دیگر لازم نیست هنگام ساخت لایه‌بندی‌های پیچیده از ویژگی شناوری یا دیگر ویژگی‌های این‌چنینی استفاده کنیم.