مодуل شبکه‌بندی CSS

Header
Menu
Main
Right
Footer

تست کنید

طرح شبکه‌ای

مقیاس شبکه CSS (CSS Grid Layout Module) یک سیستم طرح‌بندی مبتنی بر شبکه با سطرها و ستون‌ها ارائه می‌دهد که طراحی وب‌سایت را آسان‌تر می‌کند، بدون نیاز به استفاده از شناور و موقعیت‌دهی.

پشتیبانی مرورگر

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

57.0 16.0 52.0 10 44

عناصر شبکه‌ای

طرح شبکه‌ای از یک عنصر والد و یک یا چند عنصر فرزند تشکیل شده است.

مثال

<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>
1
2
3
4
5
6
7
8
9

تست کنید

Display Property

وقتی که عنصر HTML display مقیاس به grid یا inline-grid در این حالت، آن به عنوان محیط شبکه تبدیل می‌شود.

مثال

.grid-container {
  display: grid;
}

تست کنید

مثال

.grid-container {
  display: inline-grid;
}

تست کنید

تمام فرزندان مستقیم محیط شبکه به طور خودکار به عنوان پروژه شبکه تبدیل می‌شوند.

ستون‌های شبکه‌ای (Grid Columns)

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

سطرهای شبکه‌ای (Grid Rows)

خط افقی شبکه‌ای به عنوان سطر شناخته می‌شود.

فاصله شبکه‌ای (Grid Gaps)

فاصله بین هر ستون/سطر به عنوان فاصله شناخته می‌شود.

شما می‌توانید از یکی از این مقیاس‌ها برای تنظیم اندازه فاصله استفاده کنید:

  • 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-row-gap و grid-column-gap است:

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

تست کنید

مثال

grid-gap مقدار می‌تواند برای تنظیم فاصله بین سطرها و ستون‌ها به یک مقدار واحد استفاده شود:

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

تست کنید

خطوط شبکه (Grid Lines)

خطوط بین ستون‌ها به عنوان خطوط ستون (column lines) شناخته می‌شوند.

خطوط بین سطرها به عنوان خطوط سطر (row lines) شناخته می‌شوند.

هنگام قرار دادن پروژه شبکه‌ای در کنترنر شبکه، شماره خط را استفاده کنید:

مثال

پروژه شبکه‌ای را در خط 1 قرار دهید و آن را در خط 3 پایان دهید:

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

تست کنید

مثال

پروژه شبکه‌ای را در خط 1 قرار دهید و آن را در خط 3 پایان دهید:

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

تست کنید