مدل چینش شبکه ای

سربرگ

منو

محتوای اصلی

ستون سمت راست

پا نوشت

چینش شبکه ای

مدل چینش شبکه ای، سیستم چینش شبکه ای مبتنی بر سطرها و ستونها را ارائه می دهد که با استفاده از آن، طراحی صفحات وب ساده تر و بدون استفاده از خاصیت شناوری و جانمای عناصر خواهد بود.

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

ویژگی grid در همه مرورگرهای به روز و اصلی پشتیبانی می شود.

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

عناصر HTML با تنظیم ویژگی display برابر با مقادیر grid یا inline-grid به یک عنصر با خاصیت شبکه تبدیل می شوند.

.grid-container {
  display: grid;
}


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


همه عناصر زیرمجموعه اصلی به صورت خودکار، اجزای شبکه ای هستند.

ستونهای شبکه

اجزای عمودی از اجزای شبکه ای، ستون نامیده می شوند.

سطرهای شبکه

اجزای افقی از اجزای شبکه ای، سطر نامیده می شوند.

شکافهای شبکه

فاصله میان ستونها یا سطرهای مجاور را شکافهای شبکه می گویند.

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

  • 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;
}


خطوط شبکه

خطوط میان ستونها را خطوط ستونی و خطوط میان سطرها را خطوط سطری می گویند:

هنگامی که جزئی را داخل محدوده شبکه ای قرار می دهیم باید به شماره خط آن ارجاع دهیم:

در مثال زیر یک جزء شبکه ای را در خط ستونی شماره 1 قرار داده و انتهای آن را خط ستونی شماره 3 قرار داده ایم:

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


در مثال زیر یک جزء شبکه ای را از خط سطری شماره یک شروع کرده و تا خط سطری شماره 3 ادامه داده ایم:

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


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *