آموزش CSSآموزش طراحی سایت

جلسه ۴۲ – طبقه بندی به روش grid

آشنایی با گرید در CSS

منظور از Grid چیست؟ گرید چیست؟ چگونه از grid در css استفاده کنید. چگونه از grid سیستم در طراحی ریسپانسیو استفاده کنیم؟ آیا grid برای واکنش گرایی صفحات استفاده می‌شود ؟ در این مقاله به صورت کامل در رابطه با گرید صحبت می‌کنیم.

مقدار grid

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

منطق و عملکرد این روش، شباهت زیادی به روش flexbox داره.

کافیه دستور display:grid رو به عنصر پدر عناصری که می‌خوایم طبقه بندیشون کنیم اختصاص بدیم. بعد از اون، کافیه از خاصیت های grid برای عناصر فرزندمون استفاده کنیم.

عنصری که دارای دستور display:grid هست، یک grid container نامیده میشه و تمام فرزندان اون عنصر، تحت تاثیر خاصیت‌هایی که جلو تر می‌خونیم تغییر می‌کنن.

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

<div id="parent">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
   <div class="box5">5</div>
   <div class="box6">6</div>
</div>
div#parent{
   display:grid;
}

#parent div{
   height:100px;
   color:white;
   font-size:3em;
}

.box1{
   background-color:blue;
}

.box2{
   background-color:red;
}

.box3{
   background-color:green;
}

.box4{
   background-color:orange;
}

.box5{
   background-color:purple;
}

.box6{
   background-color:lightcoral;
}

کد های Grid

نتیجه به فرم زیر خواهد بود:

آیتم های Grid

اما هنوز تفاوتی بین این حالت و حالتی که display:block برای هر کدوم از عناصر فرزند داریم، مشاهده نمی‌کنیم.

برای به وجود آوردن تفاوت، باید بعد از تعریف دستور display:grid برای عنصر پدر، ستون و سطر هم تعریف کنیم.

دستورات مربوط به grid

دستورات مربوطه عبارتند از:

  • grid-template-columns
  • grid-template-rows
  • grid-column
  • grid-row
  • justify-self
  • align-self

خاصیت grid-template-columns

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

به نحوه نوشتنش دقت کنین:

grid-template-columns: [ستون اول] [ستون دوم] [ستون سوم] ....

و این چرخه می‌تونه ادامه دار باشه. حالا جای مقادیر مورد نظر چی بزاریم؟

مقدار عددی:

می‌تونیم جاشون مقدار عددی بزاریم، مثال زیر رو ببینین:

#parent{
   display: grid;
   grid-template-columns: 200px 200px;
}

طبق کد بالا، عناصر فرزند در دو ستون، هرکدوم به عرض ۲۰۰ پیکسل جا می‌گیرن. به نتیجه دقت کنین:

grid-template-columns: 200px 200px

مقدار درصدی:

می‌تونیم مقادیر رو بر حسب درصد بنویسیم:

#parent{
   display: grid;
   grid-template-columns: 60% 40%;
}

نتیجه به فرم زیر مشاهده می‌شه:

grid-template-columns: 60% 40%

مقدار بر حسب fr:

اما یه مقدار مهم تر هست، به نام fr که مخفف کلمه fraction یا سهم هست.

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

#parent{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

نتیجه:

grid-template-columns: 1fr 1fr 1frدستور فوق، سطر رو به سه قسمت مساوی برای هرکدوم از عناصر فرزند تقسیم کرد.

حالا اگه دستور رو به شکل زیر تغییر بدیم چه اتفاقی میفته؟

#parent{
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
}

نتیجه:

grid-template-columns: 1fr 2fr 1frبنابراین تونستیم با استفاده از دستور فوق، کاری کنیم که ستون دوم، ۲ برابر ستون اول و سوم جا بگیره.

به عبارتی، ستون دوم دو سهم از یک سطر و دو ستون دیگه، هر کدوم یک سهم از یک سطر رو برمی‌دارن.

خاصیت grid-template-rows

توسط این خاصیت، می‌تونیم تعداد و اندازه سطر هایی رو تعیین کنیم که عناصر فرزند ما در اون ها جا می‌گیرن.

نکته: برای استفاده از این خاصیت، حتما باید به عنصر پدر، ارتفاع اختصاص بدین.

به کد زیر و نتیجه ی اون دقت کنین:

#parent{
   display: grid;
   height:500px;
   grid-template-rows: 1fr 1fr 3fr 1fr 1fr 3fr;
}

grid-template-rows: 1fr 1fr 3fr 1fr 1fr 3frعناصر فرزند، در راستای ستونی، به شکل سطر های پشت هم چیده شدن. برطبق دستور، عنصر سوم و ششم، سه برابر فضای بقیه عناصر رو اشغال کردن.

مقادیر مورد قبول این خاصیت هم، مثل خاصیت grid-template-columns، بر حسب مقدار عددی، درصد و fr بیان می‌شن.

مقدار ()repeat

فرض کنین ما ده عنصر فرزند داریم و میخوایم تمام این ده عنصر، تو یه خط جا بگیرن.

مسلما استفاده از خاصیت grid-template-columns به شکل زیر غیر منطقی و سخته:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

ما می‌تونیم مقادیرمون رو با استفاده از تابع ()repeat به فرم خلاصه و سبک بنویسیم:

grid-template-columns: repeat(10, 1fr);

که این مقدار، به راحتی 1fr رو ده بار برای ما تکرار می کنه.

این مقدار می‌تونه برای خاصیت ‌grid-template-rows هم مورد استفاده قرار بگیره.

سلول های grid

قبل از آشنا شدن با خاصیت های پیشرفته تر grid، باید با بحثی به نام سلول های grid یا طبق گفته سایت css-tricks.com، با مفهوم grid cells آشنا بشیم و ببینیم که چطور می‌تونه روی طبقه بندی ما تاثیر داشته باشه؟

همونطور که گفتیم، زمانی که ما به عنصر پدر، display:grid اختصاص میدیم، یه فضایی به نام grid container به وجود میاریم. این فضا، دارای یک دیاگرام و طبقه بندیه.

به دیاگرام زیر، مختص یه grid container سه در سه توجه کنین:

مفهوم سلول های grid یا grid cellsسطر ها با اعداد قرمز رنگ، و ستون ها با اعداد مشکی رنگ شماره گذاری شدن.

اگه grid container ما، سطر ها و ستون های بیشتر یا کمتری داشته باشه، شکل فوق به تناسب تغییر می‌کنه.

حالا با توجه به دیاگرام بالا، یه سری خاصیت جدید رو باهم یاد می‌گیریم. خاصیت هایی که کار ما رو به مراتب راحت تر می‌کنن.

اگه جایی از مباحث رو خوب متوجه نشدین، حتما تو بخش نظرات پایگاه دانش میزفا بپرسین تا کمکتون کنیم 🙂

خاصیت grid-column

توسط این خاصیت، می‌تونیم مشخص کنیم که هرکدوم از عناصر فرزند ما، تا کدوم خط در راستای ستون ها گسترش پیدا کنن؟

قبل از استفاده از این خاصیت، باید توسط خاصیت های grid-template-columns و grid-template-rows مشخص کنیم که طبقه بندی ما چند در چنده، و سپس شروع به مشخص کردن محدوده ی هر عنصر فرزند می‌کنیم!

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

#parent{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

grid-template-columns: repeat(3, 1fr)

همونطور که میبینیم، با یه grid container سه در دو طرفیم. حالا میخوایم کاری کنیم که فرزند اول، جای فرزند دوم رو هم اشغال کنه.  برای این منظور، فرزند اول، باید از خط ۱ تا خط ۳ تو دیاگرام ادامه پیدا کنه.

کافیه بنویسیم:

.box1{
   background-color:blue;
   grid-column: 1/3;
}

و نتیجه رو به فرم زیر خواهیم دید:

فرزند اول با دستور grid-column: 1/3

خاصیت grid-row

این خاصیت، به ما کمک می‌کنه که مشخص کنیم ارتفاع هر سلول grid، باید از چه خطی تا چه خطی ادامه پیدا کنه؟

سعی می‌کنیم که از grid-row استفاده کنیم و ارتفاع فرزند دوم رو در مثالی که یکم بالا تر بررسی کردیم، تغییر بدیم. برای این منظور، کافیه که عنصر پدر رو به فرم زیر تغییر بدیم. (حواستون باشه عناصر فرزند، ارتفاع خاصی به صورت جداگونه نداشته باشن!)

#parent{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(6,1fr);
}

حالا کد عنصر دوم رو به صورت زیر می‌نویسیم:

.box2{
   background-color:red;
   grid-row: 1/4;
   grid-column: 3/4;
}

نتیجه:فرزند دوم با دستور grid-row: 1/4همونطور که میبینیم، ارتفاع فرزند دوم، از خط ۱ افقی تا خط ۴ افقی تغییر کرد.

خاصیت justify-self

این خاصیت، مثل خاصیت grid-rows و grid-columns، به عناصر فرزند داده می‌شه و وظیفش تراز افقی محتوا در سلولیه که بهش داده شده.

شباهت زیادی به خاصیت justify-content تو flexbox داره و  می‌تونه سه مقدار اصلی زیر رو قبول کنه:

  • start
  • center
  • end

برای مثال، می‌خوایم محتوای سلول اول، با توجه به چپ چین بودن محتوا، در وسط سلول قرار بگیره. به کد زیر دقت کنین:

#parent{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.box1{
   background-color:blue;
   justify-self:center;
}

نتیجه به شکل زیر مشاهده می‌شه:

عنصر اول با دستور justify-self:center

خاصیت align-self

این خاصیت، محتوای سلول ها رو در راستای عمودی تراز می‌کنه.

دقت کنین که برای استفاده از این خاصیت، حتما باید سلول های شما دارای ارتفاع باشن، اینطوری محتوا می‌تونه به صورت عمودی داخلش جا به جا شه!

به کد زیر توجه کنین:

#parent{
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   height: 500px;
   grid-template-rows: repeat(6,1fr);
}
.box1{
   background-color:blue;
   justify-self:center;
   align-self: start;
}

نتیجه:

عنصر اول با دستورات align-self: end و justify-self: centerهمونطور که میبینیم، توسط align-self:start و justify-self:center، محتوای اولین سلول رو در راستای افقی وسط چین، و در راستای عمودی بالا چین کردیم!

پایان ترم: یه سوال استک اور فلویی!

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

سوال:

سلام، امیدوارم که حالتون خوب باشه. من یه grid container دارم. می‌خوام که عنصر اول این container، یعنی box1، تمام سطر اول رو پوشش بده.

برای همین منظور از خاصیت grid-column استفاده می‌کنم و بهش می‌گم که عنصر اول، باید سلول های ۱ و ۲ رو پوشش بده.

کد من تقریبا به شکل زیره:

<div id="parent">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
</div>
div#parent{
   display:grid;
   grid-template-rows:repeat(3,300px);
   grid-template-columns:200px 200px;
   height:500px;
}

#parent div{
   height:100%;
   color:white;
   font-size:3em;
}

.box1{
   background-color:blue;
   grid-column:1/2;
}

.box2{
   background-color:red;
}

.box3{
   background-color:green;
}

.box4{
   background-color:orange;
}

اما هیچ اتفاقی نمیفته و مدام نتیجه زیر رو میبینم.

کوییز مقاله ۴۲

مشکل کجاست؟ راه های مختلفی رو امتحان کردم اما فکر نمی‌کنم مشکل از کد باشه. شاید هم باشه، اما من خیلی روش کار کردم.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

خاصیت هایی که یاد گرفتیم عبارت بودن از:

  • grid-template-columns: تعداد ستون های داخلی grid container رو مشخص می‌کنه.
  • grid-template-rows: تعداد سطر های داخلی grid container رو مشخص می‌کنه.
  • grid-column: عرض فرزند grid container رو تعیین می‌کنه.
  • grid-row: ارتفاع فرزند grid-container رو تعیین می‌کنه.
  • justify-self: تراز محتوا در راستای افقی
  • align-self: تراز محتوا در راستای عمودی

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر