طرح grid

طرح CSS Grid یک سیستم طرح بندی مبتنی بر شبکه با ردیف ها و ستون ها را ارائه می دهد که ساده تر ساختن صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت ها انجام می دهد.

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

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

57.0

16.0

52.0

10

44

عنصر Grid

طرح بندی 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  به شبکه یا inline-grid یک کانتینر grid می شود.

.grid-container {
  display: grid;
}

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

همه فرزند های مستقیم از Container Grid به صورت خودکار به مقاصد شبکه تبدیل می شوند.

Grid ستونی

خط عمودی آیتم های Grid ستون نامیده می شود.

Grid سطری

خط افقی از آیتم های شبکه ردیف می شود.

فاصله در 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-container {
  display: grid;
  grid-gap: 50px 100px;
}

خصوصیات grid-gap همچنین می تواند برای تعیین هر دو فاصله ردیف و شکاف ستون در یک مقدار استفاده شود:

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

خطوط شبکه

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

هنگام قرار دادن یک آیتم شبکه در یک Grid شبکه، به شماره خط مراجعه کنید:

یک آیتم شبکه در خط ستون 1 قرار دهید و آن را در ستون 3 خط پایان دهید:

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

یک آیتم شبکه در خط 1 ردیف قرار دهید و آن را در خط ردیف 3 به پایان برسانید:

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