سی‌اس‌اس/grid

flexbox

grid

media

سی‌اس‌اس

چیدمان شبکه‌ای در سی‌اس‌اس (CSS Grid Layout)

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

برخلاف فلکس‌باکس (Flexbox) که عمدتاً برای چیدمان تک‌بعدی (یک سطر یا یک ستون) طراحی شده است، گرید برای چیدمان دوبعدی (هم سطر و هم ستون به صورت همزمان) ایده‌آل است.

مفاهیم پایه در گرید

برای درک بهتر گرید، باید با چند اصطلاح کلیدی آشنا شوید:

• کانتینر گرید (Grid Container): عنصری که ویژگی display: grid یا display: inline-grid روی آن اعمال می‌شود. این عنصر والد مستقیم تمام آیتم‌های گرید است.
• آیتم گرید (Grid Item): فرزندان مستقیم کانتینر گرید.
• خطوط گرید (Grid Lines): خطوط افقی و عمودی که گرید را تشکیل می‌دهند. این خطوط از شماره ۱ شروع می‌شوند.
• ستون گرید (Grid Column): فضای بین دو خط عمودی گرید.
• سطر گرید (Grid Row): فضای بین دو خط افقی گرید.
• سلول گرید (Grid Cell): کوچک‌ترین واحد گرید که توسط تقاطع یک سطر و یک ستون ایجاد می‌شود.
• ناحیه گرید (Grid Area): فضای مستطیلی که توسط یک یا چند سلول گرید اشغال می‌شود.

ویژگی‌های کانتینر گرید (Grid Container)

این ویژگی‌ها روی عنصر والد (کانتینر) اعمال می‌شوند.

display

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

.container {
display: grid; یا display: inline-grid; 
}

grid-template-columns و grid-template-rows

این دو ویژگی به شما اجازه می‌دهند تا تعداد و اندازه ستون‌ها و سطرها را تعریف کنید.

• مقادیر طولی: می‌توانید از واحدهای پیکسلی (px)، درصدی (%)، em و غیره استفاده کنید.
• واحد fr (Fractional Unit): این واحد به شما امکان می‌دهد فضای موجود را به نسبت‌های دلخواه تقسیم کنید. برای مثال، 1fr 1fr 2fr به معنی تقسیم فضای موجود به چهار بخش و اختصاص یک بخش به ستون اول، یک بخش به ستون دوم و دو بخش به ستون سوم است.
• تابع repeat(): برای تکرار یک الگوی مشخص استفاده می‌شود. مثلاً repeat(3, 1fr) سه ستون با عرض برابر ایجاد می‌کند.
• auto: اندازه سطر یا ستون را بر اساس محتوای درون آن تنظیم می‌کند.

.container {
display: grid;
/* ایجاد سه ستون: اولی 100px، دومی با عرض خودکار، سومی یک سهم از فضای باقی‌مانده */
grid-template-columns: 100px auto 1fr;

/* ایجاد دو سطر: اولی 50px و دومی با ارتفاع خودکار */
grid-template-rows: 50px auto;
}

grid-gap (یا gap)

این ویژگی فاصله بین سطرها و ستون‌ها را مشخص می‌کند. grid-gap یک خلاصه برای grid-row-gap و grid-column-gap است. امروزه استفاده از gap به تنهایی (بدون پیشوند grid-) توصیه می‌شود.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);

/* فاصله 20 پیکسلی بین سطرها و ستون‌ها */
gap: 20px;

/* یا به صورت جداگانه */
  row-gap: 10px; 
  column-gap: 15px; 
}

justify-items و align-items

این ویژگی‌ها نحوه تراز شدن آیتم‌ها در داخل سلول‌هایشان را تعیین می‌کنند.

• justify-items: تراز افقی (در محور اصلی یا inline axis).
• align-items: تراز عمودی (در محور متقاطع یا block axis).

مقادیر ممکن:

• start: آیتم به ابتدای سلول می‌چسبد.
• end: آیتم به انتهای سلول می‌چسبد.
• center: آیتم در مرکز سلول قرار می‌گیرد.
• stretch: (مقدار پیش‌فرض) آیتم تمام عرض یا ارتفاع سلول را پر می‌کند.

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

justify-items: center;
/* همه آیتم‌ها به صورت افقی در مرکز سلول قرار می‌گیرند */
align-items: end;   
/* همه آیتم‌ها به صورت عمودی در انتهای سلول قرار می‌گیرند */
}

ویژگی‌های آیتم‌های گرید (Grid Items)

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

grid-column-start, grid-column-end, grid-row-start, grid-row-end

این ویژگی‌ها مشخص می‌کنند که یک آیتم از کدام خط گرید شروع و در کدام خط تمام شود.

.item-1 {
/* این آیتم از خط ستون 1 شروع شده و تا قبل از خط ستون 3 ادامه دارد */
grid-column-start: 1;
grid-column-end: 3; /* دو ستون را اشغال می‌کند */

/* این آیتم در سطر اول قرار می‌گیرد */
grid-row-start: 1;
grid-row-end: 2;
}

خلاصه نویسی

می‌توانید از ویژگی‌های grid-column و grid-row برای خلاصه‌نویسی استفاده کنید.

.item-1 {
/* شروع / پایان */
grid-column: 1 / 3;
grid-row: 1 / 2;

/* روش دیگر: شروع / تعداد خانه‌های اشغالی (span) */
/* grid-column: 1 / span 2; */
}

grid-area

این ویژگی یک خلاصه برای هر چهار ویژگی بالا است و به دو روش می‌توان از آن استفاده کرد:

۱. تعیین خطوط: مقادیر به ترتیب

grid-row-start / grid-column-start / grid-row-end / grid-column-end

هستند.

.item-1 {
grid-area: 1 / 1 / 2 / 3;
}

۲. استفاده از نام: می‌توانید با ویژگی grid-template-areas در کانتینر، برای نواحی مختلف نام انتخاب کنید و سپس با grid-area آن نام را به آیتم اختصاص دهید. این روش خوانایی کد را بسیار بالا می‌برد.

/* در کانتینر */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 10px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}

/* در آیتم‌ها */
.header-item {
grid-area: header;
}
.sidebar-item {
grid-area: sidebar;
}
.main-item {
grid-area: main;
}
.footer-item {
grid-area: footer;
}

نکته: در grid-template-areas، برای نشان دادن یک سلول خالی از نقطه (.) استفاده می‌شود.

تمرین‌ها

تمرین ۱: ساخت یک گالری ساده

یک گالری واکنش‌گرا با استفاده از گرید بسازید. این گالری باید در صفحه‌های بزرگ ۳ ستون و در صفحه‌های کوچک‌تر ۱ ستون داشته باشد.

راهنمایی:

1. یک div با کلاس gallery-container به عنوان کانتینر گرید بسازید.
2. داخل آن چند div با کلاس gallery-item قرار دهید.
3. برای .gallery-container از display: grid استفاده کنید.
4. از grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); استفاده کنید. این دستور به گرید می‌گوید که ستون‌هایی با حداقل عرض 250px ایجاد کند و در صورت وجود فضای کافی، ستون‌های بیشتری اضافه کند.

کد حل تمرین:

.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 15px;
}

.gallery-item {
width: 100%;
height: 200px;
background-color: \#ccc;
border: 1px solid \#999;
}

تمرین ۲: طراحی قالب یک وبلاگ

قالبی مشابه تصویر زیر با استفاده از grid-template-areas طراحی کنید:

• یک هدر (Header) که تمام عرض را می‌گیرد.
• یک محتوای اصلی (Main Content) که دو سوم فضا را اشغال می‌کند.
• یک سایدبار (Sidebar) که یک سوم فضا را اشغال می‌کند.
• یک فوتر (Footer) که تمام عرض را می‌گیرد.

کد حل تمرین:

body {
margin: 0;
font-family: sans-serif;
}

.blog-layout {
display: grid;
height: 100vh;
grid-template-columns: 2fr 1fr; /* ستون اصلی دو برابر سایدبار */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
gap: 10px;
}

.header {
grid-area: header;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.main-content {
grid-area: main;
background-color: \#ecf0f1;
padding: 20px;
}

.sidebar {
grid-area: sidebar;
background-color: \#bdc3c7;
padding: 20px;
}

.footer {
grid-area: footer;
background-color: \#2c3e50;
color: white;
padding: 15px;
text-align: center;
}