CSS Grid Columns, Rows and Gaps

الCSS Grid: ستون‌ها (Columns)، ردیف‌ها (Rows) و فاصله‌ها (Gaps)

—

 ۱. تعریف ستون‌ها و ردیف‌ها

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

* `grid-template-columns`: مشخص می‌کند که گرید چند ستون داشته باشد و عرض هر ستون چقدر باشد.
* `grid-template-rows`: مشخص می‌کند که گرید چند ردیف داشته باشد و ارتفاع هر ردیف چقدر باشد.

مثال:

“`css
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* ۳ ستون با عرض‌های مشخص */
grid-template-rows: 150px 100px; /* ۲ ردیف با ارتفاع‌های مشخص */
}
“`

در این مثال، گرید ۳ ستون دارد که عرض‌های آن‌ها 100px، 200px و 100px است. همچنین ۲ ردیف با ارتفاع ۱۵۰ و ۱۰۰ پیکسل.

—

۲. مقادیر قابل استفاده در ستون‌ها و ردیف‌ها

می‌توانید به جای اندازه‌های ثابت، از واحدهای نسبی یا توابع استفاده کنید، مثل:

* `fr`: واحد نسبی (fraction) که فضای موجود را تقسیم می‌کند.
* `auto`: اندازه به صورت خودکار تنظیم می‌شود.
* درصد (%)
* `min-content`, `max-content`, `minmax()`

مثال با `fr`:

“`css
grid-template-columns: 1fr 2fr 1fr;
“`

این یعنی ستون دوم دو برابر ستون اول و سوم عرض دارد.

—

 ۳. فاصله‌ها بین ستون‌ها و ردیف‌ها (Gaps)

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

* `gap`: فاصله بین ستون‌ها و ردیف‌ها (هر دو)
* `row-gap`: فقط فاصله بین ردیف‌ها
* `column-gap`: فقط فاصله بین ستون‌ها

مثال:

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 20px; /* فاصله ۲۰ پیکسل بین همه ستون‌ها و ردیف‌ها */
}
“`

اگر بخواهید فاصله متفاوت برای ستون‌ها و ردیف‌ها تعریف کنید:

“`css
gap: 10px 30px; /* 10px فاصله ردیف‌ها، 30px فاصله ستون‌ها */
“`

—

مثال کامل

“`css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 50px;
gap: 15px 25px; /* 15px بین ردیف‌ها و 25px بین ستون‌ها */
}
“`