ماژول چیدمان Grid

از موتو کد، دانشنامهٔ برنامه‌نویسی


چیدمان Grid (شبکه)[ویرایش | ویرایش]

ماژول چیدمان شبکه در CSS، یک سیستم مبتنی بر شبکه با سطرها و ستون‌ها ارائه می‌دهد، که طراحی صفحات وب بدون استفاده از floatها و موقعیت دهی (positioning) را ساده تر می‌کند.[۱]

پشتیبانی مرورگرها[ویرایش | ویرایش]

ویژگی‌های شبکه در تمامی مرورگرهای مدرن پشتیبانی می‌شوند.

Chrome Internet Explorer / Edge Firefox Safari Opera
۵۷٫۰ ۱۶٫۰ ۵۲٫۰ ۱۰ ۴۴

عناصر 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 تنظیم می‌شود.

مثال
.grid-container {
  display: grid;
}
مثال
.grid-container {
  display: inline-grid;
}

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

ستون‌های Grid[ویرایش | ویرایش]

خطوط عمودی آیتم‌های شبکه ستون‌ها (columns) نامیده می‌شوند.

سطرهای Grid[ویرایش | ویرایش]

خطوط افقی آیتم‌های شبکه سطرها (rows) نامیده می‌شوند.

فضاهای خالی Grid[ویرایش | ویرایش]

فضای بین هر ستون/سطر gap نامیده می‌شود.

شما می‌توانید اندازه فضای gap را با یکی از ویژگی‌های زیر تنظیم کنید:

grid-column-gap

grid-row-gap

grid-gap

مثال[ویرایش | ویرایش]

ویژگی grid-column-gap میزان فضای خالی بین ستون‌ها را تنظیم می‌کند:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

مثال[ویرایش | ویرایش]

ویژگی grid-row-gap میزان فضای خالی بین سطرها را تنظیم می‌کند:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

مثال[ویرایش | ویرایش]

ویژگی grid-gap یک ویژگی مختصر برای ویژگی‌های grid-column-gap و grid-row-gap است:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

مثال[ویرایش | ویرایش]

همچنین می توان ویژگی grid-gap را برای تنظیم فضای خالی هم بین سطرها و هم ستون‌ها در یک مقدار استفاده کرد:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

خطوط Grid[ویرایش | ویرایش]

خطوط بین ستون‌ها، خطوط ستون‌ها نامیده می‌شود.

خطوط بین سطرها خطوط سطرها نامیده می‌شود.

هنگام قرار دادن آیتم شبکه درون یک نگه دارنده شبکه به شماره خط دقت کنید:

مثال[ویرایش | ویرایش]

قرار دادن یک آیتم شبکه در خط ستون ۱، و اجازه‌دادن به آن برای پایان یافتن در ستون ۳:

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

مثال[ویرایش | ویرایش]

قرار دادن یک آیتم شبکه در خط سطر ۱، و اجازه دادن به آن برای پایان یافتن در سطر ۳:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

منابع آموزشی[ویرایش]