CSS Grid Layout Module

ماژول CSS Grid Layout

گرید (Grid) یک سیستم قدرتمند برای چیدمان دو بعدی (ستون‌ها و ردیف‌ها) در صفحات وب است. با کمک آن می‌توان به راحتی و با دقت، طرح‌های پیچیده را ایجاد کرد.

—

مفاهیم کلیدی

* کانتینر گرید (Grid Container):عنصر والد که دارای `display: grid` یا `display: inline-grid` است.
* آیتم‌های گرید (Grid Items): فرزندان مستقیم کانتینر گرید هستند.
* خطوط گرید (Grid Lines): ئخطوطی که ردیف‌ها و ستون‌ها را از هم جدا می‌کنند.
* ردیف‌ها و ستون‌ها (Grid Tracks): همان ردیف‌ها یا ستون‌های واقعی گرید.
* سلول‌های گرید (Grid Cells): فضای بین دو خط ردیف و ستون مجاور.
* مناطق گرید (Grid Areas): بخش‌های مستطیلی که می‌توانند شامل یک یا چند سلول باشند.

—

دستور پایه

“`css
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* تعریف ستون‌ها */
grid-template-rows: 150px 150px; /* تعریف ردیف‌ها */
gap: 10px; /* فاصله بین ستون‌ها و ردیف‌ها */
}
“`

—

ویژگی‌های کانتینر گرید

* `display: grid | inline-grid;`
* `grid-template-columns`: تعریف ستون‌ها
* `grid-template-rows`: تعریف ردیف‌ها
* `gap` / `row-gap` / `column-gap`: فاصله بین آیتم‌ها
* `grid-template-areas`: تعریف نام برای مناطق گرید
* `justify-items`: تراز کردن آیتم‌ها در جهت افقی داخل سلول‌ها
* `align-items`: تراز کردن آیتم‌ها در جهت عمودی داخل سلول‌ها
* `justify-content`: تراز کل گرید در جهت افقی
* `align-content`: تراز کل گرید در جهت عمودی

—

ویژگی‌های آیتم‌های گرید

* `grid-column-start`, `grid-column-end` یا خلاصه‌شده `grid-column`
* `grid-row-start`, `grid-row-end` یا خلاصه‌شده `grid-row`
* `grid-area`: برای مشخص کردن محل آیتم یا استفاده از نام مناطق

—

مثال

“`html
<div class=“container”>
<div class=“item1”>1</div>
<div class=“item2”>2</div>
<div class=“item3”>3</div>
<div class=“item4”>4</div>
</div>
“`

“`css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* دو ستون مساوی */
grid-template-rows: 100px 100px; /* دو ردیف با ارتفاع ۱۰۰px */
gap: 10px;
}