این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کامل ماژول Grid Layout در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل ماژول Grid Layout در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 آموزش کامل ماژول Grid Layout در CSS
- 2 تعریف حالت نمایش Grid
- 3 کار با ویژگی Grid-Template-Columns
- 4 کار با ویژگی Grid-Template-Rows
- 5 کار با ویژگی Grid-Column-Gap
- 6 کار با ویژگی Grid-Row-Gap
- 7 کار با ویژگی Justify-Content
- 8 کار با ویژگی Align-Content
- 9 کار با ویژگی Grid-Column-Start و Grid-Column-End
- 10 کار با ویژگی Grid-Row-Start و Grid-Row-End
- 11 کار با ویژگی Grid-Area و Grid-Template-Areas
- 12 مثال های بیشتر
آموزش کامل ماژول Grid Layout در CSS
گرید لایوت یا Grid Layout هم باز مثه FlexBox هست و درکل اصل کارشون یکیه اونم برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد.
- پیشنهاد میکنم آموزش فلکس باکس رو مشاهده نمایید
پس در کل بدونید flex و grid چیزهایی هستن که برای طرح بندی ( Layout ) ایجاد شده اند و هدف اصلیشون اینه که ما بتونیم تگ هارو در یک صفحه ی وب به بهترین و راحت ترین حالت ممکن ایجاد نماییم.
بفرض مثال میخوایم تو صفحه ۲تا باکس داشته باشیم، که در سمت راست یه فرم داخلش قرار بدیم و در سمت چپ یه تصویر، خب خیلی راحت میشه با استفاده از flex و grid اینکارو کرد. حالا نه فقط اینی که گفتم، کلا هرچیزی
Free-Learn
تعریف حالت نمایش Grid
خب همونطور که در آموزش FlexBox هم خواندیم ، ما باید اول از هرچیزی یک باکس یا یک ظرف ( که معمولا بهش میگن کانتینر یا Container ) رو با حالت نمایش grid ایجاد نماییم.
یعنی برای یک ظرف FlexBox ما باید حالت نمایش ظرف رو، روی flex تنظیم کنیم و برای ظرف Grid باید حالت نمایش رو، روی grid تنظیم نماییم.
حتما و ضروری است که حالت نمایش ظرف grid باشد در غیراینصورت هیچ عملی بروی آیتم ها انجام نخواهد شد.
مرحله اول : ایجاد یک ظرف با حالت نمایش grid
|
1 2 3 |
.My-Container { display: grid; } |
بعد از اون دیگه هرچیزی بزاریم داخل این ظرف عملا میشه آیتم ها یا مثلا فرزندان این ظرف که دیگه با استفاده از یکسری ویژگی های CSS که در ادامه باهاشون آشنا خواهید شد میتونیم روی آیتم های ظرف کار کنیم.
مرحله دوم : ایجاد آیتم های ظرف
|
1 2 3 4 5 6 |
<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> |
Free-Learn
کار با ویژگی Grid-Template-Columns
با استفاده از این ویژگی میتوان تعداد ستون های ظرف Grid مون رو مشخص کنیم.
این ویژگی فقط بروی ظرف Grid عمل میکند نه بروی آیتم های ظرف
اگر تعداد آیتم ها از تعداد ستون ها بیشتر باشد، آیتم های اضافه بصورت خودکار به ظرف اضافه خواهند شد
مثال شماره ۱ : ایجاد ۴ ستون از آیتم ها و استفاده از مقدار auto برای تعیین اندازه هر ستون ( یعنی بصورت خودکار مرورگر خودش اندازه هارو مشخص میکنه )
|
1 2 3 |
.My-Container { grid-template-columns: auto auto auto auto; } |
مثال شماره ۲ : تعیین اندازه هر ستون با استفاده از واحد اندازه گیری پیکسل ( PX )
|
1 2 3 |
.My-Container { grid-template-columns: 100px auto 50px auto; } |
Free-Learn
کار با ویژگی Grid-Template-Rows
با استفاده از این ویژگی ( Grid-Template-Rows ) میتوان تعداد سطرهای ظرف Grid مون رو مشخص نماییم.
مثال شماره ۱ : تنظیم اندازه سطر دوم ( سطر اول و سوم گفتیم auto باشه یعنی خودکار خودش اوکی باشه )
|
1 2 3 |
.My-Container{ grid-template-rows: auto 120px auto; } |
Free-Learn
کار با ویژگی Grid-Column-Gap
با استفاده از این ویژگی میتوان یک فضای خالی ( فاصله ) را در بین ستون های موجود در ظرف تعریف و یا ایجاد کرد.
|
1 2 3 |
.My-Container { grid-column-gap: 50px; } |
Free-Learn
کار با ویژگی Grid-Row-Gap
با استفاده از این ویژگی هم میتوان یک فضای خالی ( فاصله ) را در بین سطرهای موجود در ظرف تعریف و یا ایجاد کرد.
|
1 2 3 |
.My-Container { grid-row-gap: 50px; } |
Free-Learn
کار با ویژگی Justify-Content
با استفاده از این ویژگی نیز میتوان موقعیت قرار گیری یا تراز آیتم های ظرف را بصورت افقی مشخص کرد.
مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )
|
1 2 3 4 |
.My-Container { display: grid; justify-content: space-around; } |
مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف )
|
1 2 3 4 |
.My-Container { display: grid; justify-content: center; } |
مثال شماره ۳ : استفاده از مقدار start ( قرار گرفتن آیتم ها در قسمت ابتدایی یا شروع ظرف )
|
1 2 3 4 |
.My-Container { display: grid; justify-content: start; } |
مثال شماره ۴ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )
|
1 2 3 4 |
.My-Container { display: grid; justify-content: end; } |
Free-Learn
کار با ویژگی Align-Content
با استفاده از این ویژگی میتوان تراز آیتم های موجود در ظرف رو بصورت عمودی مشخص کرد.
برای مشاهده عملکرد این ویژگی ، لطفا با استفاده از ویژگی height اندازه ارتفاع برای ظرف مشخص نمایید.
مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )
|
1 2 3 4 5 |
.My-Container { height: 350px; display: grid; align-content: space-around; } |
مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف بصورت عمودی )
|
1 2 3 4 5 |
.My-Container { height: 350px; display: grid; align-content: center; } |
مثال شماره ۳ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )
|
1 2 3 4 5 |
.My-Container { height: 350px; display: grid; align-content: end; } |
Free-Learn
کار با ویژگی Grid-Column-Start و Grid-Column-End
با استفاده از ۲ ویژگی grid-column-start و grid-column-end میتوان محل قرار گیری یک آیتم را بصورت ستونی مشخص کرد.
مثال شماره ۱
|
1 2 3 4 5 |
.Start{ grid-column-start: 1; grid-column-end: 3; background-color: yellow !important; } |
Free-Learn
کار با ویژگی Grid-Row-Start و Grid-Row-End
با استفاده از ۲ ویژگی grid-row-start و grid-row-end میتوان محل قرار گیری یک آیتم را بصورت سطری مشخص کرد.
مثال شماره ۱
|
1 2 3 4 5 |
.Start{ grid-row-start: 1; grid-row-end: 4; background-color: yellow !important; } |
Free-Learn
کار با ویژگی Grid-Area و Grid-Template-Areas
ویژگی 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 8 9 10 11 |
.My-Container{ grid-template-areas: 'MyItem1 MyItem1 MyItem2 MyItem2'; } .Item1{ grid-area: MyItem1; } .Item2{ grid-area: MyItem2; } |
مثال شماره ۲ : ایجاد یک طرح بندی ساده ( هدر ، ستون راست و چپ ، ستون وسط محتوا و فوتر ) + واکنش گرایی ( یعنی در گوشی های موبایل ستون ها میوفتن زیر هم )
لطفا در مثال زیر، صفحه نمایش را کوچک نمایید تا بتوانید عملکرد را مشاهده نمایید. ( برای تغییر اندازه صفحه کافیه دقیقا وسط صفحه رو با ماوس بگیرید و به سمت راست و چپ جابه جا نمایید )
|
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 |
.My-Container{ 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; } @media (max-width: 500px){ .My-Container { grid-template-areas: 'header' 'main' 'seton-rast' 'seton-chap' 'footer'; } } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : قرار دادن آیتم در وسط ظرف ( بصورت افقی عمودی دقیقا وسط ظرف )
|
1 2 3 4 5 |
.My-Container{ display: grid; justify-content:center; align-items:center; } |
مثال شماره ۲ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم
|
1 2 3 4 5 |
@media (max-width: 600px){ .My-Container{ grid-template-columns: auto; } } |
مثال شماره ۳ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی
|
1 2 3 4 5 6 7 8 9 10 11 |
.MyContainer{ display: grid; grid-template-columns: auto auto auto auto; } /* وقتی عرض صفحه کمتر از 600 پیکسل شد */ @media (max-width: 600px){ .MyContainer{ grid-template-columns: auto; } } |
Free-Learn
خب دوستان خسته نباشید به پایان آموزش کامل ماژول Grid Layout در CSS رسیدیم، امیدوارم که مشکل خاصی در این بخش از آموزش نداشته باشید.
در این جلسه سعی کردم ساده و تاحدودی بطور کامل مبحث Grid رو بهتون آموزش بدم، ولی خب شما حتما تمامی ویژگی های مرتبط با Grid رو از لینک زیر دنبال کنید.
- لیست تمامی ویژگی های مرتبط با Grid را مشاهده نمایید
