ماژول چیدمان 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;
}


منابع آموزشی