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

صفحه آرایی صفحه وب با گرید (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

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

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

 

Grid Line

 

با توجه به شماره خط‌ها ویژگی جدیدی را معرفی می‌کنیم که برای مقداردهی طول و عرض هر آیتم و یکی کردن دو آیتم به کار می‌رود. مثل ویژگی colspan در تگ جدول است، این کار با ۴ ویژگی 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>header<header> 
  <main>main<main> 
  <aside>sidebar<aside> 
  <footer>footer<footer> 
<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 مناسب تر است.


برخی از پروژه‌ها
فروش آنلاین
گالری گاندی

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

طراحی داخلی
دریم هاوس

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

پروژه‌های بیشتر