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

جلسه 42 – طبقه بندی به روش grid
منظور از 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;

}



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



اما هنوز تفاوتی بین این حالت و حالتی که display: برای هر کدوم از عناصر فرزند داریم، مشاهده نمی‌کنیم.
برای به وجود آوردن تفاوت، باید بعد از تعریف دستور 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;

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



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

   display: grid;

   grid-template-columns: 60% 40%;

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



مقدار بر حسب fr:
اما یه مقدار مهم تر هست، به نام fr که مخفف کلمه fraction یا سهم هست.
به مثال زیر توجه کنین:
#parent{

   display: grid;

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

}
نتیجه:


دستور فوق، سطر رو به سه قسمت مساوی برای هرکدوم از عناصر فرزند تقسیم کرد.
حالا اگه دستور رو به شکل زیر تغییر بدیم چه اتفاقی میفته؟
#parent{

   display: grid;

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

}
نتیجه:


بنابراین تونستیم با استفاده از دستور فوق، کاری کنیم که ستون دوم، 2 برابر ستون اول و سوم جا بگیره.
به عبارتی، ستون دوم دو سهم از یک سطر و دو ستون دیگه، هر کدوم یک سهم از یک سطر رو برمی‌دارن.
خاصیت grid-template-rows
توسط این خاصیت، می‌تونیم تعداد و اندازه سطر هایی رو تعیین کنیم که عناصر فرزند ما در اون ها جا می‌گیرن.
نکته: برای استفاده از این خاصیت، حتما باید به عنصر پدر، ارتفاع اختصاص بدین.
به کد زیر و نتیجه ی اون دقت کنین:
#parent{

   display: grid;

   height:500px;

   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 container ما، سطر ها و ستون های بیشتر یا کمتری داشته باشه، شکل فوق به تناسب تغییر می‌کنه.
حالا با توجه به دیاگرام بالا، یه سری خاصیت جدید رو باهم یاد می‌گیریم. خاصیت هایی که کار ما رو به مراتب راحت تر می‌کنن.
اگه جایی از مباحث رو خوب متوجه نشدین، حتما تو بخش نظرات پایگاه دانش میزفا بپرسین تا کمکتون کنیم ??
خاصیت grid-column
توسط این خاصیت، می‌تونیم مشخص کنیم که هرکدوم از عناصر فرزند ما، تا کدوم خط در راستای ستون ها گسترش پیدا کنن؟
قبل از استفاده از این خاصیت، باید توسط خاصیت های grid-template-columns و grid-template-rows مشخص کنیم که طبقه بندی ما چند در چنده، و سپس شروع به مشخص کردن محدوده ی هر عنصر فرزند می‌کنیم!
به مثال زیر توجه کنین:
#parent{

   display: grid;

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

}



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

   background-color:blue;

   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;

}
نتیجه:

همونطور که میبینیم، ارتفاع فرزند دوم، از خط 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;

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



خاصیت 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:start و justify-self:center، محتوای اولین سلول رو در راستای افقی وسط چین، و در راستای عمودی بالا چین کردیم!
پایان ترم: یه سوال استک اور فلویی!
 
وب سایت استک اور فلو، وب سایتیه که برنامه نویسا و کدنویسا سوالاتشون رو اونجا مطرح می‌کنن تا دیگران کمکشون کنن. با توجه به مباحثی که تو این مقاله یاد گرفتین، باید توانایی کمک به کدنویسی که سوال زیر رو مطرح کرده داشته باشین.
سوال:
سلام، امیدوارم که حالتون خوب باشه. من یه grid container دارم. می‌خوام که عنصر اول این container، یعنی box1، تمام سطر اول رو پوشش بده.
برای همین منظور از خاصیت grid-column استفاده می‌کنم و بهش می‌گم که عنصر اول، باید سلول های 1 و 2 رو پوشش بده.
کد من تقریبا به شکل زیره:
<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;

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



مشکل کجاست؟ راه های مختلفی رو امتحان کردم اما فکر نمی‌کنم مشکل از کد باشه. شاید هم باشه، اما من خیلی روش کار کردم.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن 10 هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
نتیجه گیری
در این مقاله، با 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: تراز محتوا در راستای عمودی
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی‌