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

آخرین مقالات

با ما همیشه به روز باشید

در مجله اینترنتی هینزا می‌توانید به آخرین دانستنی های IT دسترسی داشته باشید.

ارتقای خدمات طراحی دیجیتال

ما منتظر شما هستیم

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

هینزا در حوزه IT و در اختیار داشتن کارشناسان خبره و با تجربه در حوزه های شبکه، برنامه نویسی و امنیت، می تواند به صورت یک جا پاسخگوی تمام نیازهای شما باشد.