یکی از اساس طراحی وبسایت، استفاده از ساختار شبکه‌ای (Grid) است و با استفاده از CSS Grid می‌توان به راحتی این ساختار را طراحی کرد. شاید بتوان این روش را جایگزینی برای استفاده از فریم‌ورک های متفاوت دانست.

این ویژگی توسط مرورگرهای جدید به راحتی قابل پشتیبانی است، در نتیجه تمام طراحان وبسایت حتما باید با این روش آشنا باشند.

در این مقاله به صورت مختصر به توضیح در مورد CSS Grid و روش استفاده از آن می‌پردازیم.

طراحی اولین Grid

دو عنصر اصلی این ساختار، والد(Wrapper) و فرزند(Item) هستند. شبکه اصلی ما، همان Wrapper است که محتویات داخل آن قرار می‌گیرند.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

برای این که wrapper را به یک شبکه تغییر دهیم باید ویژگی display آن را برابر با grid قرار دهیم.

.wrapper {
    display: grid;
}

تا زمانی که ساختار شبکه خود را تعریف نکنیم، فقط ۶ div را روی هم می‌بینیم.

سطر و ستون در CSS Grid

برای این که شبکه را به صورت دوبعدی تغییر دهیم، باید سطر و ستون‌های آن را مشخص کنیم. در اینجا با دستورات grid-template-row و grid-template-column،  ۳ ستون و ۲ سطر را ایجاد می‌کنیم.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

از آنجایی که ۳ پارامتر برای grid-template-columns تعریف کردیم, در نتیجه تعداد ستون های شبکه برابر ۳ و به همین صورت تعداد سطرهای شبکه برابر ۲ قرار می‌گیرد. مقدار پارامترها هم بیانگر میزان عرض و یا ارتفاع یک سلول از شبکه است. (در اینجا هر سلول  ۱۰۰ پیکسل عرض و ۵۰ پیکسل ارتفاع دارد)

یک مثال دیگر با اندازه‌های متفاوت برای تسلط به این موضوع بیان می‌کنیم.

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

ساختار این شبکه به شکل زیر خواهد بود.

جایگذاری سلول‌ها

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

همین حالا یک شبکه ۳x3 ایجاد کنید.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

خروجی کار به شکل زیر خواهد بود.

همان طور که انتظار داشتیم خروجی کار همچنان به شکل یک جدول ۲x3 است چرا که در فایل html فقط ۶ سلول تعریف کردیم.

برای تغییر اندازه یک سلول و یا جا‌به‌جایی آن، می‌توان از کد زیر استفاده کرد.

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

در کد فوق برای یکی از سلول‌ها (item1) مشخص می‌کنیم که از ستون اول تا انتهای ستون چهارم را در بر گیرد. می‌توانید برای مثال بالا، از کد خلاصه زیر استفاده کنید.

.item1 {
    grid-column: 1 / 4;
}

برای درک بهتر این موضوع تصویر زیر را ببینید.

زمانی که یک سلول تمام سطر را در برگیرد, سلول‌های بعدی به سطر بعد منتقل می‌شوند. برای درک بهتر این موضوع مثال زیر را مشاهده کنید.

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

خروجی نهایی شبکه زیر است.

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