آموزش رایگان و کامل ماژول Grid Layout در CSS

آموزش کامل ماژول Grid Layout در CSS

فهرست عناوین

این ماژول ( یا سیستم طرح بندی یا چیدمان ) که در لغت میشه ( ماژول چیدمان شبکه ای ) نیز همانند FlexBox یک سیستم برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد.

بطور کلی منظور از طرح بندی یا Layout بندی یعنی اینکه ما بتونیم قالب یک صفحه وب را مشخص نماییم، مثلا ما یک باکس ایجاد میکنیم و این باکس رو به عنوان هدر سایت مشخص میکنیم، یا مثلا یک باکس دیگه برای فوتر سایت و.. که بتونیم یک طرح بندی رو ایجاد نماییم.

پس در کل بدونید ویژگی هایی که برای طرح بندی ( Layout ) ایجاد شده اند ، هدف اصلیشون اینه که ما بتونیم عناصر ( یا تگ ها ) را در یک صفحه ی وب به بهترین و راحت ترین حالت ممکن ایجاد نماییم.

تعریف حالت نمایش Grid

خب همونطور که در آموزش FlexBox هم خواندیم ، ما باید اول از هرچیزی یک باکس یا یک ظرف یا ( معمولا بهش میگن کانتینر Container ) رو با حالت نمایش grid ایجاد نماییم.

یعنی برای یک ظرف FlexBox ما باید حالت نمایش ظرف رو، روی flex تنظیم کنیم و برای ظرف Grid باید حالت نمایش رو، روی grid تنظیم نماییم.

حتما و ضروری است که حالت نمایش ظرف grid باشد در غیراینصورت هیچ عملی بروی آیتم ها انجام نخواهد شد.

بعد از اون دیگه هرچیزی بزاریم داخل این ظرف عملا میشه آیتم ها یا مثلا فرزندان این ظرف که دیگه با استفاده از یکسری ویژگی های CSS که در ادامه باهاشون آشنا خواهید شد میتونیم روی آیتم های ظرف کار کنیم.

پس در اولین مرحله ما باید یک ظرف با حالت نمایش grid ایجاد نماییم :

.My-Container {
  display: grid;
}

.My-Container {

display: grid;

}

ایجاد آیتم های ظرف Grid

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

پس ما میتونیم یک ظرف و آیتم های آن را بصورت زیر تعریف نماییم :

<body>

<div class="My-Container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>  

  <div class="item">4</div>

</div>

</body>

<body>

</div>

</body>

کار با ویژگی Grid-Template-Columns

خب در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با اولین ویژگی ای ( Grid-Template-Columns ) که درون ظرف Grid مورد استفاده قرار میگیرد آشنا شویم و باهاش کار کنیم ، با استفاده از این ویژگی میتوان تعداد ستون های شبکه Grid مون رو مشخص کرد.

این ویژگی فقط بروی ظرف Grid عمل میکند نه بروی آیتم های ظرف

اگر تعداد آیتم ها از تعداد ستون ها بیشتر باشد، آیتم های اضافه بصورت خودکار به ظرف اضافه خواهند شد

مثال شماره ۱ : ایجاد ۴ ستون از آیتم ها و استفاده از مقدار auto برای تعیین اندازه هر ستون ( auto یعنی بصورت خودکار مرورگر خودش اندازه هارو مشخص میکنه )

.My-Container {

  display: grid;

  grid-template-columns: auto auto auto auto;

}

.My-Container {

display: grid;

grid-template-columns: auto auto auto auto;

}

مثال شماره ۲ : تعیین اندازه هر ستون با استفاده از واحد اندازه گیری پیکسل ( PX )

My-Container {

  display: grid;

  grid-template-columns: 100px auto 50px auto;

}

My-Container {

display: grid;

grid-template-columns: 100px auto 50px auto;

}

کار با ویژگی Grid-Template-Rows

خب ویژگی بالا که تعداد ستون هارو مشخص میکرد و الان با استفاده از این ویژگی ( Grid-Template-Rows ) میتوان تعداد سطرهای ظرف شبکه Grid مون رو مشخص نماییم.

مثال شماره ۱ : تعیین اندازه سطرها با استفاده از واحد اندازه گیری پیکسل ( PX )

همونطور که در مثال زیر مشاهده مینمایید من با استفاده از ویژگی Grid-Template-Rows اندازه سطر اول رو ۶۰ پیکسل و اندازه سطر دوم رو ۱۰۰ پیکسل و در نهایت اندازه سطر سوم از آیتم هارو ۲۰۰ پیکسل قرار دادم.

My-Container {

  display: grid;

  grid-template-rows: 60px 100px 200px;

}

My-Container {

display: grid;

grid-template-rows: 60px 100px 200px;

}

کار با ویژگی Grid-Column-Gap

با استفاده از این ویژگی میتوان یک فضای خالی ( فاصله ) را در بین ستون های موجود در یک ظرف تعریف و یا ایجاد کرد.

.My-Container {

  display: grid;

  grid-column-gap: 120px;

}

.My-Container {

display: grid;

grid-column-gap: 120px;

}

کار با ویژگی Grid-Row-Gap

با استفاده از این ویژگی هم میتوان یک فضای خالی ( فاصله ) را در بین سطرهای موجود در یک ظرف تعریف و یا ایجاد کرد.

.My-Container {

  display: grid;

  grid-row-gap: 60px;

}

.My-Container {

display: grid;

grid-row-gap: 60px;

}

کار با ویژگی Grid-Gap

با استفاده از این ویژگی میتوان ۲ ویژگی grid-column-gap و grid-row-gap را بصورت خلاصه نوشت.

مثال شماره ۱ : استفاده از ۲ مقدار ( مقدار اول برای فاصله بین ستون ها و مقدار دوم برای فاصله بین سطرها )

.My-Container {

  display: grid;

  grid-gap: 15px 40px;

}

.My-Container {

display: grid;

grid-gap: 15px 40px;

}

مثال شماره ۲ : استفاده از ۱ مقدار ( یک مقدار هم برای فاصله بین ستون ها و هم سطرها اعمال میشود )

.My-Container {

  display: grid;

  grid-gap: 15px;

}

.My-Container {

display: grid;

grid-gap: 15px;

}

بیشتر بخوانیم:

کار با ویژگی Justify-Content

با استفاده از این ویژگی نیز میتوان موقعیت قرار گیری یا تراز آیتم های ظرف را بصورت افقی مشخص کرد.

مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )

.My-Container {

  display: grid;

  justify-content: space-around;

}

.My-Container {

display: grid;

justify-content: space-around;

}

مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف )

.My-Container {

  display: grid;

  justify-content: center;

}

.My-Container {

display: grid;

justify-content: center;

}

مثال شماره ۳ : استفاده از مقدار start ( قرار گرفتن آیتم ها در قسمت ابتدایی یا شروع ظرف )

.My-Container {

  display: grid;

  justify-content: start;

}

.My-Container {

display: grid;

justify-content: start;

}

مثال شماره ۴ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )

.My-Container {

  display: grid;

  justify-content: end;

}

.My-Container {

display: grid;

justify-content: end;

}

کار با ویژگی Align-Content

در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با ویژگی align-content آشنا شویم، اگه آموزش فلکس باکس رو مشاهده کرده باشید میدونید که با ویژگی align-content در اونجاهم کار کردیم.

همانطور که از اسم این ویژگی مشخصه ، با استفاده از آن میتوان تراز آیتم های موجود در ظرف یا همون Container را بصورت عمودی مشخص کرد.

برای مشاهده عملکرد این ویژگی ، لطفا با استفاده از ویژگی height اندازه ارتفاع برای ظرف مشخص نمایید.

مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )

.My-Container {

  height: 400px;

  display: grid;

  align-content: space-around;

}

.My-Container {

height: 400px;

display: grid;

align-content: space-around;

}

مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف بصورت عمودی )

.My-Container {

  height: 400px;

  display: grid;

  align-content: center;

}

.My-Container {

height: 400px;

display: grid;

align-content: center;

}

مثال شماره ۳ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )

.My-Container {

  height: 400px;

  display: grid;

  align-content: end;

}

.My-Container {

height: 400px;

display: grid;

align-content: end;

}

کار با ویژگی Grid-Column-Start

با استفاده از این ویژگی میتوان مشخص کرد که یک آیتم از کدام ستون / لاین شروع شود. مثلا اگه بگیم آیتم شماره ۱ از ستون شماره ۳ شروع شه خب اون آیتم در ظرف از ستون شماره ۳ شروع میشود. ( لطفا به مثال توجه نمایید )

مثال : شروع شدن آیتم شماره ۱ از ستون شماره ۳

.item1 {

  grid-column-start: 3;

}

.item1 {

grid-column-start: 3;

}

مثال شماره ۲ : شروع شدن آیتم شماره ۱ و ادغام کردن ۳ ستون باهم

.item1 {

  grid-column-start: span 3;

}

.item1 {

grid-column-start: span 3;

}

کار با ویژگی Grid-Column-End

خب ویژگی قبلی که دیدیم ستون شروع شدن یک آیتم رو مشخص میکرد، حال با استفاده از ویژگی grid-column-end میتوان مشخص کردن که خط یا ستون پایان یک آیتم کجا باشد.

مثال شماره ۱ :

.item1 {

  grid-column-end: 4;

}

.item1 {

grid-column-end: 4;

}

کار با ویژگی Grid-Row-Start

این ویژگی هم دقیقا همون Grid-Column-Start می باشد فقط با این تفاوت که این ویژگی بروی سطرهای ظرف کار میکند.

مثال شماره ۱ : شروع شدن آیتم شماره ۱ از سطر شماره ۲

.item1 {

  grid-row-start: 2;

}

.item1 {

grid-row-start: 2;

}

مثال شماره ۲ : ادغام آیتم شماره ۱ تا سطر ۴

.item1 {

  grid-row-start: span 4;

}

.item1 {

grid-row-start: span 4;

}

کار با ویژگی Grid-Row-End

اینم که دیگه مشخصه، با استفاده از این ویژگی میتوان سطر پایان دهنده یک آیتم رو مشخص کرد.

مثال شماره ۱ : قرار گیری آیتم شماره ۱ قبل از سطر شماره ۴

.item1 {
  grid-row-end: 4;
}

.item1 {

grid-row-end: 4;

}

کار با ویژگی Grid-Area و Grid-Template-Areas

در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با ویژگی grid-area آشنا شویم و ببینیم این ویژگی برای چه کاری مورد استفاده قرار میگیرد.

این ویژگی برای خلاصه نویسی ویژگی های grid-row-start و grid-column-start و grid-row-end و grid-column-end می باشد، حال علاوه بر این ، ما میتوانیم با استفاده از این ویژگی یک نام را برای آیتم های موجود در Grid تعریف نماییم.

در واقع با استفاده از ویژگی Grid-Area میتوان یک نام را برای آیتم های گرید ( Grid ) مشخص و یا تعریف کرد ، سپس میتوان همین نام تعریف شده را به ویژگی Grid-Template-Areas برای تعریف ستون های Grid متصل کرد.

برای تعریف سطرها باید نام آیتم ها را درون تک کوتیشن ‘ ‘ گذاشت.

برای تعریف ستون ها باید در بین هر یک از نام آیتم ها ( ۱ عدد ) فاصله گذاشت.

مثال شماره ۱ : تعریف نام برای آیتم شماره ۱ و استفاده از نام تعریف شده برای مشخص کردن ستون های گرید

.My-Container {
  grid-template-areas: 'test test test test';
}

.item1 {
  grid-area: test;
}

.My-Container {

grid-template-areas: 'test test test test';

}

.item1 {

grid-area: test;

}

مثال شماره ۲ : ایجاد ۴ ستون از نام های تعریف شده برای آیتم ها

.My-Container {
  grid-template-areas: 'item1 item1 item2 item2'
'item1 item1 item2 item2' 'item3 item3 item3 item3'
'item4 item4 item5 item5' 'item4 item4 item5 item5';
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.My-Container {

grid-template-areas: 'item1 item1 item2 item2'

'item1 item1 item2 item2' 'item3 item3 item3 item3'

'item4 item4 item5 item5' 'item4 item4 item5 item5';

}

.item1 {

grid-area: item1;

}

.item2 {

grid-area: item2;

}

.item3 {

grid-area: item3;

}

.item4 {

grid-area: item4;

}

.item5 {

grid-area: item5;

}

مثال شماره ۳ : طرح بندی یک قالب ساده بر پایه Grid ( دارای هدر – ستون سمت راست – بدنه اصلی – ستون سمت چپ و فوتر )

My-Container {

  display: grid;

  grid-template-areas: 'header header header header header'

'seton-chap main main main seton-rast'

'footer footer footer footer footer';

}

.item1 {

  grid-area: header;

}

.item2 {

  grid-area: seton-chap;

}

.item3 {

  grid-area: main;

}

.item4 {

  grid-area: seton-rast;

}

.item5 {

  grid-area: footer;

}

My-Container {

display: grid;

grid-template-areas: 'header header header header header'

'seton-chap main main main seton-rast'

'footer footer footer footer footer';

}

.item1 {

grid-area: header;

}

.item2 {

grid-area: seton-chap;

}

.item3 {

grid-area: main;

}

.item4 {

grid-area: seton-rast;

}

.item5 {

grid-area: footer;

}

مثال شماره ۴ : واکنش گرایی مثال شماره ۳ ( یعنی اگه بروی گوشی های موبایل یا درکل بروی دستگاهایی که عرض صفحه نمایششون کمتر از ۵۰۰ پیکسل بود، چیدمان Grid ما به نسبت صفحه نمایش تغییر کند )

در مثال زیر با توجه به سلیقه خودم نحوه چیدمان آیتم ها را در گوشی موبایل نیز تغییر دادم، مثلا بدنه اصلی را بعد از هدر قرار دادم و…

لطفا در مثال زیر، صفحه نمایش را کوچک نمایید تا بتوانید عملکرد را مشاهده نمایید. ( برای تغییر اندازه صفحه کافیه دقیقا وسط صفحه رو با ماوس بگیرید و به سمت راست و چپ جابه جا نمایید )

@media only screen and (max-width: 500px) {

.My-Container {

  grid-template-areas: 'header' 'main' 'seton-rast' 'seton-chap' 'footer';

}

}

@media only screen and (max-width: 500px) {

.My-Container {

grid-template-areas: 'header' 'main' 'seton-rast' 'seton-chap' 'footer';

}

آموزش رایگان و کامل ماژول Grid Layout در CSS

آموزش کامل ماژول Grid Layout در CSS

تعریف حالت نمایش Grid

ایجاد آیتم های ظرف Grid

کار با ویژگی Grid-Template-Columns

کار با ویژگی Grid-Template-Rows

کار با ویژگی Grid-Column-Gap

کار با ویژگی Grid-Row-Gap

کار با ویژگی Grid-Gap

کار با ویژگی Justify-Content

کار با ویژگی Align-Content

کار با ویژگی Grid-Column-Start

کار با ویژگی Grid-Column-End

کار با ویژگی Grid-Row-Start

کار با ویژگی Grid-Row-End

کار با ویژگی Grid-Area و Grid-Template-Areas

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

آموزش کامل ماژول Grid Layout در CSS

تعریف حالت نمایش Grid

ایجاد آیتم های ظرف Grid

کار با ویژگی Grid-Template-Columns

کار با ویژگی Grid-Template-Rows

کار با ویژگی Grid-Column-Gap

کار با ویژگی Grid-Row-Gap

کار با ویژگی Grid-Gap

کار با ویژگی Justify-Content

کار با ویژگی Align-Content

کار با ویژگی Grid-Column-Start

کار با ویژگی Grid-Column-End

کار با ویژگی Grid-Row-Start

کار با ویژگی Grid-Row-End

کار با ویژگی Grid-Area و Grid-Template-Areas

مطالب زیر را حتما مطالعه کنید

آموزش رایگان HTML مقدماتی تا پیشرفته بخش پاراگراف

UI چیست؟

برترین فریم ورک های جاوا اسکریپت در 2021

آموزش رایگان افزونه فید اینستاگرام

آموزش رایگان کار با لایه ها و پالت Color & Swatches در فتوشاپ

آموزش رایگان و کامل کار با توابع یا Functions در CSS3

دیدگاهتان را بنویسید لغو پاسخ