طراحی شبکه
ماژول CSS Grid Layout یک سیستم طراحی مبتنی بر شبکه ارائه می‌دهد که شامل ردیف‌ها و ستون‌هاست و طراحی صفحات وب را بدون نیاز به استفاده از float و position آسان‌تر می‌کند.
پشتیبانی مرورگرها
ویژگی‌های مربوط به grid در تمامی مرورگرهای مدرن پشتیبانی می‌شود.
| Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|
| 57.0 | 16.0 | 52.0 | 10 | 44 |
عناصر Grid
یک طراحی شبکه‌ای شامل یک عنصر والد است که دارای یک یا چند عنصر فرزند می‌باشد.
مثال
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>ویژگی Display
یک عنصر HTML با تنظیم ویژگی display به مقدار grid یا inline-grid به یک container شبکه تبدیل می‌شود.
مثال
.grid-container {
display: grid;
}یا
.grid-container {
display: inline-grid;
}تمام فرزندان مستقیم container شبکه به‌طور خودکار به عناصر شبکه تبدیل می‌شوند.
ستون‌های شبکه
خطوط عمودی درون شبکه به نام ستون‌ها شناخته می‌شوند.
ردیف‌های شبکه
خطوط افقی درون شبکه به نام ردیف‌ها شناخته می‌شوند.
فاصله‌های شبکه (Grid Gaps)
فضاهای بین هر ستون/ردیف به نام فاصله‌ها یا گپ‌ها شناخته می‌شوند.
تنظیم فاصله ستون‌ها و ردیف‌ها
برای تنظیم اندازه فاصله بین ستون‌ها یا ردیف‌ها می‌توانید از یکی از خواص زیر استفاده کنید:
column-gap: فاصله بین ستون‌هاrow-gap: فاصله بین ردیف‌هاgap: خلاصه‌ای از هر دو خاصیت
مثال‌ها
تنظیم فاصله بین ستون‌ها:
.grid-container {
display: grid;
column-gap: 50px;
}تنظیم فاصله بین ردیف‌ها:
.grid-container {
display: grid;
row-gap: 50px;
}استفاده از خاصیت gap برای تنظیم هر دو فاصله:
.grid-container {
display: grid;
gap: 50px 100px; /* فاصله ردیف و ستون */
}تنظیم فاصله یکسان برای ردیف و ستون:
.grid-container {
display: grid;
gap: 50px; /* یک فاصله برای هر دو */
}خطوط شبکه
- خطوط عمودی بین ستون‌ها به نام خطوط ستون (column lines) هستند.
- خطوط افقی بین ردیف‌ها به نام خطوط ردیف (row lines) هستند.
استفاده از شماره خطوط برای قرار دادن عناصر شبکه
می‌توانید از شماره‌های خطوط برای قرار دادن یک عنصر در یک container شبکه استفاده کنید.
مثال‌ها
قرار دادن یک عنصر از خط ستون 1 و پایان در خط ستون 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}قرار دادن یک عنصر از خط ردیف 1 و پایان در خط ردیف 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام