جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش رایگان و کامل ماژول Grid Layout در CSS

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

23 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
317 بازدید
آموزش صفحه بندی یا Pagination در CSS

آموزش کامل ماژول 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

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

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

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

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

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

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

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

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

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

1
2
3
.My-Container {
  display: grid;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

 

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

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

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

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

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  grid-template-columns: auto auto auto auto;
 
}

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

1
2
3
4
5
6
7
My-Container {
 
  display: grid;
 
  grid-template-columns: 100px auto 50px auto;
 
}

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

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

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

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

1
2
3
4
5
6
7
My-Container {
 
  display: grid;
 
  grid-template-rows: 60px 100px 200px;
 
}

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

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

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  grid-column-gap: 120px;
 
}

 

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

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  grid-row-gap: 60px;
 
}

 

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

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

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  grid-gap: 15px 40px;
 
}

 

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  grid-gap: 15px;
 
}

 

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

  • نحوه کامل فلکس باکس یا Flexbox در CSS3
  • آموزش صفحه بندی یا Pagination در CSS
  • آموزش کار با ستون ها در CSS3
  • برترین افزونه های جدول ساز وردپرس
  • آموزش کار با عناصر Block و Inline در CSS

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

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

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  justify-content: space-around;
 
}

 

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  justify-content: center;
 
}

 

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  justify-content: start;
 
}

 

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

1
2
3
4
5
6
7
.My-Container {
 
  display: grid;
 
  justify-content: end;
 
}

 

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

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

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

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

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

1
2
3
4
5
6
7
8
9
.My-Container {
 
  height: 400px;
 
  display: grid;
 
  align-content: space-around;
 
}

 

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

1
2
3
4
5
6
7
8
9
.My-Container {
 
  height: 400px;
 
  display: grid;
 
  align-content: center;
 
}

 

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

1
2
3
4
5
6
7
8
9
.My-Container {
 
  height: 400px;
 
  display: grid;
 
  align-content: end;
 
}

 

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

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

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

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

1
2
3
4
5
.item1 {
 
  grid-column-start: 3;
 
}

 

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

1
2
3
4
5
.item1 {
 
  grid-column-start: span 3;
 
}

 

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

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

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

مثال شماره ۱ :

1
2
3
4
5
.item1 {
 
  grid-column-end: 4;
 
}

 

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

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

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

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

1
2
3
4
5
.item1 {
 
  grid-row-start: 2;
 
}

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

1
2
3
4
5
.item1 {
 
  grid-row-start: span 4;
 
}

 

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

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

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

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

1
2
3
.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 متصل کرد.

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

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

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

1
2
3
4
5
6
7
.My-Container {
  grid-template-areas: 'test test test test';
}
 
.item1 {
  grid-area: test;
}

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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 ( دارای هدر – ستون سمت راست – بدنه اصلی – ستون سمت چپ و فوتر )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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 ما به نسبت صفحه نمایش تغییر کند )

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

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

1
2
3
4
5
6
7
8
9
@media only screen and (max-width: 500px) {
 
.My-Container {
 
  grid-template-areas: 'header' 'main' 'seton-rast' 'seton-chap' 'footer';
 
}
 
}

 

اشتراک گذاری:
برچسب ها: CSSGridGrid LayoutLayoutآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش Grid Layout
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت