صفحه آرایی صفحه وب با گرید (display:grid)

۲۹ فروردین ، ۱۳۹۷

برای طراحی صفحات همیشه از float و یا جدول استفاده می‌کنیم، که البته به کمک فریم ورک‌های آماده مثل بوت استرپ ساختن grid در صفحات وب ساده شده و تنها با دادن چند کلاس می‌توان صفحه را به صورت ریپانسیو گرید بندی کرد. اما استفاده از این فریم ورک‌ها که با همان خاصیت‌های float، flex یا تگ table ایجاد شده‌اند، محدودیت‌هایی دارند و هدف هر کدام جداگانه چیز دیگری است.

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

در این مقاله به توضیح و چگونگی پیاده سازی آن می پردازیم:

Grid Container

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

که HTML آن به صورت زیر است:

 

 
<div class='grid-container'> 
  <div class='grid-item'>div> 
  <div class='grid-item'>div> 
  <div class='grid-item'>div> 
   
div> 

و CSS آن به صورت زیر:

 

 
.grid-container { 
  display: grid;        /* پدر از نوع بلاک */ 
  display: inline-grid; /* پدر از نوع خطی */ 
  display: subgrid;     /* برای عناصر گرید که خود نیز پدر عناصر دیگر است */ 
} 

 

ویژگی grid-template-columns

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

 

 

.grid-container { 

  display: grid; 

  grid-template-columns: auto auto auto auto; 

} 

که مقادیر auto همگی اندازه طول عناصر داخلی اند به ترتیب قابل جاگزین شدن با اعداد ثابتند.

 

 

.grid-container {   grid-template-columns: 100px auto auto auto; 
} 

و به همین شکل نیز برای grid-template-rows است.

 

 
.grid-container { 
  grid-template-rows: auto 100px auto; 
} 

Grid Gap

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

 

 
.grid-container { 
  grid-gap: 10px; 
  grid-gap: 10px 5px; 
  grid-row-gap: 10px; 
  grid-column-gap: 10px; 
} 

 

Grid Line

 

با توجه به شماره خط ها ویژگی جدیدی را معرفی می‌کنیم که برای مقداردهی طول و عرض هر آیتم و یکی کردن دو آیتم بکار می‌رود. مثل ویژگی colspan در تگ جدول است، این کار با 4 ویژگی grid-column-start و grid-column-end، grid-row-start و grid-row-end است.

Grid Start و Grid End

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

  • Gird-column-start: محل شروع ستون را مشخص می کند.
  • Grid-column-end: محل پایان ستونی که آغاز شده.
  • Grid-row-start: محل شروع ردیف آیتم مد نظر
  • Grid-row-end: محل اتمام ردیفی که شروع شده.

 

 
.grid-item:firsth-child() { 
  grid-column-start: 1; 
  grid-column-end: 3; 
} 

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

 

 
.grid-item:firsth-child() { 
  grid-row-start: 1; 
  grid-row-end: 3; 
} 

دو ویژگی grid-column و grid-row 

چهای ویژگی بالا را به اختصار با این دو ویژگی می توان نوشت 

 

 
.grid-item { 
  grid-column:  / ; 
  grid-row:  / ; 
} 

ویژگی grid-template-areas

به کمک این ویژگی می توان به آیتم های مختلف نام مخصوص بدهیم مثلا header و footer و main و side و ...فقط باید در نظر بگیریم که اول به آیتم هایی که نیاز داریم در گرید جا خاص بگیرند نام اختصاص دهیم.

در مثال زیر body را به عنوان پدر در نظر میگیریم و مابقی تگ ها را نام گذاری می کنیم.

 

 
<body> 
  <header>headerheader> 
  <main>mainmain> 
  <aside>sidebaraside> 
  <footer>footerfooter> 
body> 
 
body { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: auto; 
} 
header { 
  grid-area: header;   
} 
main { 
  grid-area: main;   
} 
aside { 
  grid-area: aside;   
} 
footer { 
  grid-area: footer;   
} 

حال می توانیم چیدمان تمپلیت را به صورت زیر انجام دهیم.

 

 
body { 
  grid-template-areas: 'header header header header' 
                       'main main . aside' 
                       'footer footer footer footer'; 
} 

که در نهایت خروجی به صورت زیر است.

چند نکته مهم در مورد این ویژگی: 

  • باید دقت شود که تعداد نام های نوشته شده در ردیف ها یکسان باشد.
  • نقطه هایی که گذاشته می شود اگر مابین آنها فاصله ای نباشد، یک سلول خالی است و برای چند سلول خالی باید space بین نقطه ها گذاشته شود.
  • مقدار پیش فرض این ویژگی none است.
  • وقتی از این ویژگی استفاده می کنید خطها به صورت پیش فرض با نام سلول ها نام گذاری می شوند مثل header-start و header-end

 

ترازبندی آیتم ها در گریدها

تمامی ویژگی های ترازبندی با مقادیر آنها به صورت زیر است که با توجه به تنظیمات مدنظرمان می توانیم اجرا کنیم:

 

 
.grid-container { 
  justify-content: center | start | end | space-between | space-around | space-evenly ;  
  align-content: center | start | end | space-between | space-around | space-evenly ; 
  justify-items: center | start | end | stretch; 
  align-items: center | start | end | stretch; 
  justify-self: center | start | end | stretch; 
  align-self: center | start | end | stretch; 
} 

 

Flex یا grid؟

کسانیکه به طور کامل با اون دو ماژول آشنا نیستند در نهایت این سوال پیش می آید که از کدام یک از این دو است کنند و تفاوت flexbox با grid چیست؟

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


میانگین آرا:
97.6% (26 نفر)
رای دهید:
مقالات مرتبط
مشاهده بیشتر...