آموزش برنامه نویسی - تاپ دمی

آموزش کامل CSS Grid - بخش دوم

ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 3 دقیقه
آموزش کامل CSS Grid - بخش دوم

کنترل فواصل در grid

با استفاده از این ویژگی می تونیم بر روی چیدمان تک تک المنت های صفحه کنترل بهتری داشته باشیم.

به مثال زیر توجه کنید :

ابتدا یک المنت را انتخاب می کنیم و کلاس های خودمون رو بر روی اون اعمال می کنیم :

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
</style>

تویه این مثال ما گفتیم که در حالت column از خط 2 شروع کن و اندازه خودت رو تا خط 4 ادامه بده.

grid

برای کنترل المنت ها در سطر ها row هم به همین شکل عمل می کنیم به این صورت که :

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

grid

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

 2/4 :  grid-colmn 

برای المنت ها در حالت row هم میشه این کار رو کرد:

.item1 {
  grid-row: 1 / span 2;
}

توجه داشته باشید که فاصله بین دو خط یک spanهست و ما با استفاده از همین تعریف میتونیم خیلی راحت فاصله ی بین المنت ها رو کنترل کنیم ، برای مثال :

در حالت ستون

.item1 {
  grid-column: 1 / span 2;
}
</style>

تابع () minmax

با استفاده از این تابع میتونیم حداقل و حداکثر فضا رو برای هر سطر و یا ستون ایجاد کنیم.

مثال :

  grid-template-rows: minmax(20px, auto) minmax(20px, 30px) minmax(20px, auto);

Area یا ناحیه بندی

ابتدا المنتی که قصد داریم روی آن تغییر ایجاد کنیم را با استفاده ازgrid-area ناحیه بندی میکنیم تا سیستم grid ما متوجه شود کدام ناحیه مدنظر ما است ، پس از آن با توجه به نام کلاس یا ایدی المنت های صفحه که ناحیه بندی شدن تعداد سطر و ستون صفحه ی وب خودمون رو مشخص میکنیم برای این کار از کلاس grid-template-areas استفاده می کنیم.

مثال :

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>

اگر بعد از ناحیه بندی که ایجاد کردید و هنگام صدا زدن نواحی مانند کد زیر از سه نقطه استفاده کنید سایر المنت های صفحه که ناحیه بندی نشده اند در ادامه المنت ناحیه بندی شده ی ما قرار میگیرند:

.item1 {
  grid-area: myArea;
}

  grid-template-areas: 'myArea myArea . . .';

اگر قطعه کد زیر را در ادیتور خود اجرا کنید به چنین تصویری میرسیم :

grid

<style>
.item1 { grid-area: header; }
.item2 { grid-area: nav; }
.item3 { grid-area: content; }
.item4 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'nav content content content content content'
  'nav footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">nav</div>
  <div class="item3">content</div>  
  <div class="item4">Footer</div>
</div>

آموزش کامل CSS Grid - بخش اول

این مقاله برای شما چقدر مفید بود ؟

18 اردیبهشت، 1401

اشتراک گزاری مقاله

مقالات مشابه

معرفی  بهترین فریم ورک های  CSS

معرفی بهترین فریم ورک های CSS

در این مقاله نگاهی به بهترین فریم ورک های css داریم و محاسن و معایب هر یک را بررسی می کن...

ادامه مطلب
نحوی انتخاب عناصر یا  Selector ها در CSS

نحوی انتخاب عناصر یا Selector ها در CSS

در این مقاله ابتدا به بررسی css می پردازیم و پس از آن نحوه انتخاب عناصر و انواع Selector...

ادامه مطلب
اشتباهات رایج در  css

اشتباهات رایج در css

در این مقاله ابتدا به تعریف css می پردازیم و پس از آن چند مثال از اشتباهات رایج در css ر...

ادامه مطلب