آموزش css grid در 20 دقیقه

آموزش css grid در 20 دقیقه

  • سطح :
  • مطالعه : 2 دقیقه
  • 7371

آموزش css grid در 20 دقیقه

css-grid

Css Grid چیست ؟

بطور کلی ماژول css grid این قابلیت را در اختیار طراح می گذارد تا عناصر موجود در سند را دو بعد عرضی و طولی یکی بصورت افقی در قالب سطر ها ( rows ) و دیگری بصورت عمودی در قالب ستون ها ( columns ) براحتی با هر طول و عرضی قرار دهد بدون اینکه مشکلی در نمایش صحیح آنها بوجود آید مانند تصویر بالا  .

 

چیدمان شبکه بندی عناصر ( grid laylout ) پایه و اساس طراحی وب و رابط های کاربری می باشد, و ماژول css gird ساده ترین و در عین حال قدرتمند ترین ابزار برای این منظور است.

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

خوشبختانه پشتیبانی از این ماژول اخیرا توسط مرورگرهای محبوبی مثل سافاری ، کروم ، فایرفاکس ، اج آغاز شده است ، و این یکی از دلایلی است که تمام توسعه دهندگام front-end باید هر چه زودتر به سراغ فراگیری css grid بروند.

 

در این مقاله قصد دارم شما را با اصول و مفاهیم پایه CSS Grid در آشنا می کنم و در پایان این مقاله پی به قدرت css grid ,انعطاف پذیری بالای آن و در نهایت سادگی استفاده از آن به شرطی که مفاهیم و ساختار آن را بخوبی درک کنید خواهید برد.

 

اولین تجربه برای کار با Css Grid

ساختار css grid به دو بخش اصلی تقسیم می شود :

1- عنصر والد ( parent element )

2 – عناصر فرزند ( child elements )

خوب دو بخش اصلی بالا رو بصورت کد های زیر در نظر بگیرید.

<div class="wrapper">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
<div/>

همانطور که در کدهای بالا مشاهده می کنید ما دو بخش اصلی ایجاد کردیم یکی عنصری با کلاس wrapper به عنوان والد و چندین عنصر دیگر درون آن به عنوان فرزندان آن, حال برای استفاده از عنصر والد در قالب ماژول css grid کافیست که مقدار پراپرتی display آن را برابر grid قرار دهیم مانند کد زیر :

.wrapper {
    display: grid;
}

الان اگر کدهای بالا را اجرا کنید تغیر خاصی را مشاهد نخواهید کرد و خروجی آن در مرورگر چیزی شبیه به تصویر زیر خواهد بود ( من در اینجا صرفا برای هریک از فرزندان زنگ پس زمینه متفاوتی در نظر گرفته ام تا خروجی واضح تر باشد و برای این کار برای هر یک از فرزندان پراپرتی background-color با رنگ های متفاوت استفاده کرده ام ).

css-grid

سطر ها و ستون ها ( Rows and Columns )

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

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

نتیجه کد بالا بصورت زیر خواهد بود :

CssGrid

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

در مثال بالا ما دو سطر داریم بخاطر اینکه مقادیر پراپرتی grid-template-rows برابر با دو مقدار 50 پیکسلی در نظر گرفتیم و بطبع اگر یک یا چند مقدار نیز دیگر در نظر می گرفتیم تعداد سطر های ما هم افزایش پیدا می کرد برای پراپرتی grid-template-columns که مسئول ایجاد ستون ها می باشد شرایط به همین شکل است.

 

واحد های در نظر گرفته شده تعیین کنند مقدار طول و عرض عناصر فرزند نسبت و عنصر والد می باشد و می تواند علاوه بر px واحد های رایج دیگر مثل % , rem ,em ,auto و … نیز باشد.

 

در اینجا برای اینکه درک بهتری از مقادیری که برای پراپرتی های grid-template-rows و grid-template-columns در مثال قبل در نظر گرفته شده داشته باشیم در مثالی جدید مقادیر متفاوت تری را برای آنها در نظر می گیریم.

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

و خروجی کد بالا به شکل زیر خواهد بود :

Cssgrid-cafeamoozesh

جانمایی دلخواد عناصر فرزند !

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

اگر قبلا تجربه مشخص کردن مکان دقیق عناصر را با پراپرتی های مانند float یا بحث postion ها و مقادیر relative ,absolute ,top ,left ,right ,bottom داشته باشید قطعا با مشکلات و چالش های آنها آشنا هستید.

بیایید با استفاده از مثال اول و صرفا با تغیر طول و عرض عناصر فرزند ، یک شبکه 3×3 ایجاد کنیم.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

و خروجی کد بالا به شکل زیر خواهد بود :

Css-Grid-cafeamoozesh.com

توجه کنید ، ما فقط یک شبکه 3×2 در صفحه می بینیم ، در حالی که ما آن را به عنوان شبکه 3×3 تعریف کردیم ! دلیل این اتفاق این است که ما فقط شش عنصر فرزند درون عنصر والد داریم که می توانند شبکه ( grid ) را پر کنند. اگر سه فرزند دیگر داشتیم ، یک ردیف دیگر اضافه می شد مانند کد زیر ( به عنوان تمرین بعهده شما 🙂  )

 

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

 

مکان دلخواه و سایز دلخواه برای عناصر فرزند

برای موقعیت دهی و تغییر اندازه دلخواه عناصر فرزند ابتدا باید به نوعی  آنها را هدف قرار داده و فراخوانی کنیم تا بتوانیم از خصوصیات grid-column و grid-row برای آنها استفاده می کنیم لذا در اینجا برای هر یک از عناصر فرزند کلاسی را در نظر می گیریم :

 : Html Markup

<div class="wrapper">
  <div child ="1">1</div>
  <div child ="2">2</div>
  <div child ="3">3</div>
  <div child ="4">4</div>
  <div child ="5">5</div>
  <div child ="6">6</div>
</div>

 : Style

.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}

.child1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

 

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

Cssgrid--cafeamoozesh

 

یکم عجیب شد نه !؟ با استفاده از پراپرتی های grid-column-start و grid-column-end برای عناصر فرزند که در این مثال برای عنصر فرزند با کلاس child1 بود در حقیقت مشخص می کنیم که هر یک از فرزندان که این دو پراپرتی را دارند چه تعداد از ستون هایی را که عنصر والد برای هر یک از فرزندان در نظر گرفته اشغال و گسترش یابند در مثال فوق عنصر والد برای هر فرزند 100px برای طول و عرض ستون  آنها در نظر گرفته است این گسترش طول و عرض بر اساس مفهومی با عنوان line در سیستم گرید که در ادامه به توضیح آن خواهیم پرداخت صورت می گیرد.

مثال برای درک بهتر : فرض کنید که در یک سالن سینما در هر ردیف 3 صندلی وجود داشته باشد و برای هر یک از افراد حاضر در سالن یک صندلی با ابعاد یکسان با سایر صندلی ها  در نظر گرفته شده باشد حال فردی به جای اینکه روی صندلی خود بنشیند بخواهد دراز بکشد قطعا یک صندلی برای او کافی نخواهد بود و مجبور است بنا به نیاز خود 2 یا 3 صندلی دیگر و موجود در ردیف خود را اشغال کند لذا سایر افراد باید بروند و در ردیف های بعدی بنشینند اینجا عرض صندلی ها گسترش پیدا نکرده بله شخص مورد نظر از مجموع عرض چند صندلی استفاده کرده است.

 

لذا آنچه می خواهیم این است که عنصر فرزند با کلاس child1 از اولین خط ( line ) سیستم شبکه شروع شود و در خط ستون چهارم آن پایان یابد. به عبارت دیگر ، کل ردیف را اشغال می کند.

 

دقت داشته باشید که در مثال بالا ما از کل سطر اول استفاده کرده ایم لذا در چنین حالتی که اولین عنصر با کلاس child1 کل ردیف اول را اشغال کند ، بقیه عناصر فرزند به صورت خودکار به سطر بعدی منتقل خواهند شد.

 

در ضمن ساختار استفاده از پراپرتی های grid-column-start و grid-column-end را خلاصه تر هم می توان نوشت به صورت زیر و با استفاده از پراپرتی grid-column :

 

.child1 {
 grid-column-start: 1;
 grid-column-end: 4; 
}

خلاصه :

.child1 { 
grid-column: 1 / 4; 
}

 

خوب ممکنه این سوال برای شما پیش آید زمانی که ما برای هر ردیف 3 ستون ( column ) در نظر گرفته ایم پس چطور می شود که 4 خط ( line ) داشته باشیم ؟! در ادامه به تشریح این مورد خواهیم پرداخت چون باید با مفهومی به عنوان line آشنا شویم.

 

مفهوم line ( خط ) در css grid

 

css grid line

با توجه به شکل بالا در cssgrid به تعداد ستون ها و یا سطر هایی که تعریف می کنیم یک line اضافه تر خواهیم داشت مطابق با فرمول زیر :

verical line number = columns +1

 horizontal line number = rows +1

در مثال بالا ما 3 ستون داریم پس تعداد line های عمودی ما برابر 4 خواهد بود و همچنین 3 ردیف داریم که تعداد line های افقی ما برابر 4 خواهد بود.لذا توسط پراپرتی های grid-column-start و grid-column-end که خلاصه آن  grid-column می باشد ما مشخص می کنیم هر یک از فرزند از چه line تا چه line ی در عرض و بصورت افقی گسترش یابند.

همچنین توسط پراپرتی های grid-row-start و grid-row-end که خلاصه آن grid-row می باشد ما مشخص می کنیم هر یک از فرزند از چه line تا چه line ی در ارتفاع و بصورت عمودی گسترش یابند.

این ویژگی های ماژول css grid است که باعث ایجاد سیستم های شبکه بندی ( grid systems ) پیچیده شد و باعث می شود که طراحان وب به راحتی بتواند ساختارهای پیچیده ای را براحتی ایجاد و مدیریت کنند.

 

به عنوان بخش پایانی این مقاله آموزشی یک مثال پیچیده تر با ترکیب ردیف ها و ستون ها و گسترس عناصر فرزند چه در عرص و چه در طول بررسی خواهیم کرد.

 

 : Html Markup

<div class="wrapper">
 <div child ="1">1</div>
 <div child ="2">2</div>
 <div child ="3">3</div> 
<div child ="4">4</div>
 <div child ="5">5</div>
 <div child ="6">6</div>
 </div>

 : Style

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

 

خروجی کدها بالا :

css-grid-modul-cafeamoozeh

دقت داشته باشد برای فرزندانی که از پراپرتی های grid-column-start ,grid-column-end و یا grid-row-start ,grid-row-end استفاده نشود طول و عرضی که عنصر والدشان توسط  پراپرتی های grid-template-columns و grid-template-rows در نظر گرفته بطور پیش فرض در نظر گرفته می شود.

 

بسیار خوب به پایان این مقاله رسیدیم و با مفهوم css grid بطور کلی آشنا شدیم هدف این مقاله آشنایی شما علاقه مندان با قدرت و انعطاف پذیری ماژول css grid بود و قطعا موارد دیگه ای هم در این ماژول وجود داره اما با اهمیت کمتر …حالا وقتش دست بکار بشید و با توجه به مواردی که توضیح داده شد تصویر زیر رو به عنوان اولین تمرین توسط css grid پیاده سازی کنید 😉

 

css-grid

 

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

پرسش و پاسخ

اولین دیدگاه رو شما برای ما ارسال و کنید

کاربر گرامی : برای ارسال دیدگاه خود ابتدا باید در سایت لاگین نمایید.