برای طراحی صفحات همیشه از 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 مناسب تر است.
