021-20483015

چیدمان شبکه ای در CSS

طرح grid

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

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

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

57.0
16.0
52.0
10
44

عنصر Grid

طرح بندی 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 می شود.

ویژگی Display
.grid-container {
  display: grid;
}
مشاهده مثال

ویژگی Display
.grid-container {
  display: inline-grid;
}
مشاهده مثال

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

Grid ستونی

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

Grid Columns

Grid سطری

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

Grid Rows

فاصله در Grid

فضای بین هر ستون / ردیف فاصله نامیده می شود.

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-container {
  display: grid;
  grid-gap: 50px 100px;
}
مشاهده مثال

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

فاصله کلی
.grid-container {
  display: grid;
  grid-gap: 50px;
}
مشاهده مثال

خطوط شبکه

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

Grid Lines

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

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

سطر و ستون
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
مشاهده مثال

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

سطر و ستون
.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط