صفحه آرایی شبکه Grid

Grid چیست؟ در طراحی گرافیکی، Grid یک سازه‌ی معمولاً دو بعدی است که از یک سری خطوط تقاطع مستقیم یا منحنی تشکیل شده و برای ساختار محتوا از آن استفاده می‌شود. چون المان‌های ما در CSS Grid دوبعدی هستند، پس اینجا نیز با مفاهیمی مانند خطوط، ردیف، ستون و فواصل سروکار خواهیم داشت.

Grid یا صفحه آرایی شبکه ای یک مدل صفحه آرایی دو بعدی در CSS است که به شما امکان می‌دهد المان‌ها را به صورت ردیفی و ستونی در صفحات وب خود صفحه آرایی کنید. Grid از ساختاری شبیه به جدول برای صفحه آرایی المان‌ها استفاده می‌کند و به شما کنترل دقیق بر موقعیت، اندازه و ترازبندی هر المان در صفحه می‌دهد.

امکانات Grid

• صفحه آرایی المان‌ها در یک ردیف یا ستون بدون نیاز به تعیین عرض یا ارتفاع مشخص.
• کامل ریسپانسیو است و به طور خودکار المان ها را با توجه به اندازه صفحه نمایش تطبیق می دهد و نیازی به نوشتن کد جداگانه، برای دستگاه های مختلف نیست.
• با توجه به 2 بُعدی بودن، قابلیت ایجاد طرح های کاملاً پیچیده و شبکه ای را دارد.
• قابلیت کنترل دقیق بر موقعیت، اندازه و ترازبندی المان ها را دارد و میتوانید هر سلول را به طور جداگانه و دقیق ترازبندی کنید.
• دارای قابلیت های پیشرفته همچون grid-gap grid-template-areas و واحد اندازه گیری fr برای توزیع فضای خالی به طور مساوی بین المان هاست.

مقایسه Grid با Flexbox

Grid و Flexbox هر دو مدل صفحه آرایی قدرتمندی در CSS هستند، اما هر کدام مزایا و معایب خاص خود را دارند:

مفاهیم اساسی CSS Grid Layout

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

• Grid Lines اینها خطوط افقی و عمودی هستند که ساختار شبکه را تعریف می‌کنند. آنها در نقاط تقاطعی به وجود می‌آیند تا سلول‌ها را ایجاد کنند. خطوط شبکه از ۱ شماره‌گذاری می‌شوند و با حرکت به سمت راست یا پایین افزایش می‌یابند.
• Grid Column در طراحی به نمایش ستونی المان‌ها، Column گفته می‌شود. ستون می‌تواند با استفاده از Line که در بخش قبل معرفی کردیم نیز تعریف شود. در واقع، فواصل بین خطوط عمودی همان ستون‌های ما هستند.
• Grid Row در طراحی به نمایش ردیفی المان‌ها، Row گفته می‌شود. مانند ستون، ردیف هم طبق مفهوم Grid Line می‌تواند تعریف شود و به فواصل بین خطوط افقی تعبیر می‌شود.
• Grid Track یک واژه‌ی عمومی با نام Grid Track وجود دارد که هم برای ردیف و هم برای ستون به‌کار می‌رود و در واقع به فاصله‌ی میان هر دو خط همسایه گفته می‌شود.
• Grid Cells اینها واحدهای مستقلی هستند که توسط تقاطع یک ردیف و یک ستون ایجاد می‌شوند. هر سلول قسمت خاصی از شبکه را نمایان می‌کند.
• Grid Areas این اصطلاح به یک یا چند سلول مجاور که با هم یک مستطیل را تشکیل می‌دهند، اطلاق می‌شود. می‌توانید محتوا را به مناطق شبکه اختصاص دهید تا امکان ساختارهای پیچیده‌تر و طرح‌های زیباتر فراهم شود.

Grid Container و Grid Items

همانند FlexBox، وقتی که یک المنت HTML را با ویژگی display: grid یا display: inline-grid استایل می‌دهید، این المنت به عنوان یک Grid Container شناخته می‌شود و فرزندان آن به عنوان Grid Items در نظر گرفته می‌شوند. به عبارت دیگر، هر المنتی که به عنوان یک محیط شبکه (Grid Container) تعریف شود، فرزندان خود را با ویژگی display: grid یا display: inline-grid انعطاف‌پذیر می‌کند. این Grid Items می‌توانند در فضای شبکه دوبعدی به صورت افقی و عمودی چیده شوند و با استفاده از ویژگی‌های مختلف CSS Grid قابلیت کنترل و آراستن آن‌ها را دارید.

Grid Container

ویژگی display در CSS برای تعیین نحوه نمایش یک المنت استفاده می‌شود. در مورد Grid، وقتی این ویژگی به "grid" تنظیم می‌شود، المنت مورد نظر به عنوان یک Grid Container شناخته می‌شود و المنت ها داخلی آن به عنوان Grid Items مدیریت می‌شوند. به عبارت دیگر، با تنظیم display به grid، المنت مورد نظر به یک قابلیت صفحه آرایی شبکه تبدیل می‌شود، که این امکان را فراهم می‌کند که المنت ها داخلی را در یک نظام صفحه آرایی انعطاف‌پذیر و با توزیع خودکار قرار دهیم.

فرق اصلی بین display: grid و display: inline-grid در CSS این است که یکی از آنها grid به صورت بلوک عمل می‌کند و دیگری inline-grid به صورت خطی یا درون خط.

.my_container {
	/* display : grid, inline-grid or ...*/
	display: grid;
}

Grid Items

Grid Items یا آیتم‌های شبکه، بلوک‌های محتوایی هستند که در داخل یک Grid Container یا محیط شبکه قرار می‌گیرند. این آیتم‌ها با توجه به قواعد Grid چیده و تراز می‌شوند و به شما امکان می‌دهند صفحه آرایی های شبکه‌ای پیچیده و انعطاف‌پذیر را برای وب‌سایت خود ایجاد کنید.

انعطاف‌پذیری در تعریف اندازه ترک‌ها Track

در CSS Grid Layout، هنگام تعریف اندازه ترک‌ها (Track) که ردیف‌ها و ستون‌های شبکه را تشکیل می‌دهند، انعطاف‌پذیری زیادی در اختیار دارید. در اینجا روش‌های مختلفی برای تعریف اندازه ترک‌ها آورده شده است:

1. اندازه ثابت (Fixed Size)

می‌توانید اندازه ترک را با استفاده از پیکسل px، واحدهای نسبی (مانند em یا rem) یا درصد % به صورت ثابت تعریف کنید.

2. اندازه ذاتی (Intrinsic Size)

می‌توانید اندازه ترک را بر اساس اندازه محتوای آن تعریف کنید. برای این کار از کلمات کلیدی زیر استفاده می‌شود:

• auto: فضای مقدار دهی نشده، یعنی باقیمانده از ترک را دربرمیگیرد، اگر چند فضای auto داشته باشیم، فضای باقیمانده بین autoها تقسیم می شود.
• min-content: اندازه ترک به حداقل اندازه محتوای آن تنظیم می‌شود.
• max-content: اندازه ترک به حداکثر اندازه محتوای آن تنظیم می‌شود.
• fit-content (جدید در CSS Grid Layout): اندازه ترک به اندازه مناسب برای نمایش محتوای آن تنظیم می‌شود.

3. واحد fr

واحد fr (fractional unit) در Grid به شما اجازه می‌دهد از فضای موجود در شبکه به بهترین شکل استفاده کنید. با fr می‌توانید به المنت ها بگویید که چه قدر از فضای باقیمانده را اشغال کنند، این کار به شما امکان می‌دهد طرح‌های شبکه‌ای انعطاف‌پذیر و ریسپانسیوی را ایجاد کنید که به طور خودکار با اندازه صفحه نمایش سازگار شوند.

فرض کنید یک صفحه آرایی دو ستونی با ستون‌های 1fr و 2fr دارید. در این حالت، ستون اول یک سوم و ستون دوم دو سوم فضای موجود را اشغال می‌کنند.

نکات و مزایای fr

• ریسپانسیو بودن: صفحه آرایی‌های با استفاده از واحد fr به طور خودکار با اندازه صفحه نمایش سازگار می‌شوند و در دستگاه‌های مختلف به خوبی نمایش داده می‌شوند.
• استفاده آسان: استفاده از واحد fr ساده و شهودی است و به شما امکان می‌دهد بدون نیاز به محاسبات پیچیده، صفحه آرایی‌های شبکه‌ای متناسب ایجاد کنید.
• می‌توانید از توابع CSS مانند minmax() برای محدود کردن عرض ستون‌ها با استفاده از واحد fr استفاده کنید.
• چنانچه از % برای مشخص کردن اندازه استفاده کنید، با gap که در ادامه با آن آشنا میشوید به مشکل بیرون زدگی از container مواجه می شوید در صورتی که با fr این مشکل به وجود نمی آید.

.grid {
	display: grid;
	grid-template-rows: 2fr 1fr;
}

4. توابع کمکی

1. minmax(min, max) : در Grid برای تعریف حداقل و حداکثر اندازه یک المنت در صفحه آرایی شبکه‌ای استفاده می‌شود.

.grid {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}

2. repeat(n, track-size): این تابع به شما امکان می‌دهد تعداد مشخصی از ترک‌های تکراری با اندازه مشخص تعریف کنید. همچنین می‌توانید از repeat(auto-fit, min-track-size) برای تکرار خودکار ترک‌ها بر اساس فضای موجود استفاده کنید.

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.grid2 {
	display: grid;
	grid-template-rows: repeat(2, minmax(100px, auto));
}

5. راهبردهای صفحه آرایی خودکار

auto-fit و auto-fill دو روش برای تعیین تعداد ستون‌ها یا ردیف‌ها در یک شبکه هستند.

• auto-fit : وقتی از این روش استفاده می‌شود، ستون‌ها یا ردیف‌ها به گونه‌ای تنظیم می‌شوند که حداکثر تعداد ممکنی از آن‌ها در محدوده مشخصی جایگیری کنند. اگر فضای موجود کافی باشد، تعداد ستون‌ها یا ردیف‌ها افزایش می‌یابد و اگر فضای کمتری وجود داشته باشد، برای جایگزینی فضای خالی، ستون‌ها یا ردیف‌ها تغییر اندازه می‌دهند.

• auto-fill : در این روش، تعداد ستون‌ها یا ردیف‌ها به تعداد مشخص شده ایجاد می‌شوند و اگر فضای موجود کافی نباشد، ستون‌ها یا ردیف‌ها به اندازه ممکن تغییر اندازه می‌یابند تا شبکه پر شود. اگر فضای بیشتری وجود داشته باشد، ستون‌ها یا ردیف‌ها به اندازه ممکن بزرگتر می‌شوند تا فضای خالی را پر کنند.

استفاده از auto-fit مناسب است وقتی می‌خواهید که تعداد ستون‌ها یا ردیف‌ها به طور انعطاف‌پذیر با اندازه محتوا تطابق داشته باشند. اما اگر نیاز به پرکردن فضای مشخصی با ستون‌ها یا ردیف‌ها دارید، auto-fill مناسب‌تر است.

ویژگی های Grid Container

• display
• grid-template-columns, grid-template-rows
• align-content, justify-content, place-content
• align-items, justify-items, place-items
• grid-column-gap, column-gap, grid-row-gap, row-gap, grid-gap, gap
• grid-auto-columns, grid-auto-rows
• grid-auto-flow

grid-template-columns, grid-template-rows

grid-template-columns یک ویژگی CSS در Grid است که برای تعریف تعداد و عرض ستون‌های یک صفحه آرایی شبکه‌ای استفاده می‌شود. مقدار آن یک رشته است که بواسطه فاصله ( ) تعداد ستون و با استفاده از واحدهای اندازه‌گیری مختلف عرض هر ستون را در شبکه‌ای مشخص می‌کند.

grid-template-rows یک ویژگی CSS در Grid است که برای تعریف تعداد و عرض ردیف های یک صفحه آرایی شبکه‌ای استفاده می‌شود. مقدار آن یک رشته است که بواسطه فاصله ( ) تعداد ردیف و با استفاده از واحدهای اندازه‌گیری مختلف عرض هر ردیف را در شبکه‌ای مشخص می‌کند.

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 250px minmax(100em, auto);
	grid-template-rows: 150px repeat(3, 1fr) minmax(5em, auto);
}

align-content, justify-content, place-content

هر المنت و محتوایی که داخل Grid Container قرار دارد content محسوب می شود، پس زمانی که از صفحه آرایی عمودی یا افقی content صحبت می کنیم، منظور صفحه آرایی کل محتوا در داخل container هست.

در grid هرگاه صحبت از align می شود منظور صفحه آرایی عمودی (بالا پایین) هست، و زمانی که از justify صحبت میشه منظور صفحه آرایی افقی (چپ راست) هست.

• align-content : تنظیم صفحه آرایی محتوا بصورت عمودی داخل container
• justify-content : تنظیم صفحه آرایی محتوا بصورت افقی داخل container
• place-content : align-content justify-content; تنظیم همزمان صفحه آرایی محتوا عمودی و افقی

از مهمترین مقادیری که این ویژگی های میتونند بگیرند : sertech, start, end, center, space-between, space-around, space-evenly می باشند.

برای ویژگی justify-content مقادیر left و right را هم در نظر بگیرید.

align-items, justify-items, place-items

Grid Items ها داخل خودشون محتوا دارند که ممکنه کامل item را پر نکنه، برای همین ما میتونیم با ویژگی های این بخش که بصورت []-items نامیده می شوند، صفحه آرایی محتوای داخل هر item را به نسبت فضای در دسترس آن item مشخص کنیم.

در grid هرگاه صحبت از align می شود منظور صفحه آرایی عمودی (بالا پایین) هست، و زمانی که از justify صحبت میشه منظور صفحه آرایی افقی (چپ راست) هست.

• align-items : تنظیم صفحه آرایی محتوای داخل item ها بصورت عمودی
• justify-items : تنظیم صفحه آرایی محتوای داخل item ها بصورت افقی
• place-items : align-items justify-items; تنظیم همزمان صفحه آرایی محتوا داخل item ها بصورت عمودی و افقی

از مهمترین مقادیری که این ویژگی های میتونند بگیرند : sertech, start, end, center, space-between, space-around, space-evenly می باشند.

برای ویژگی justify-items مقادیر left و right را هم در نظر بگیرید.

justify-self, align-self, place-self

حالا که صحبت در خصوص ترازبندی ها هست 3 ویژگی که مربوط به Grid Items هست رو اینجا ذکر میکنیم تا با اونها هم همینجا آشنا بشید.

گاهی اوقات هست که نیاز داریم بصورت اختصاصی تنها یک آیتم را ترازبندیش رو تغییر بدیم یا مستثنی کنیم از تراز بندی دیگر آیتم ها، اینجاست که از ویژگی های زیر استفاده میکنیم برای item مد نظرمون.

نکته : این ویژگی ها بر روی item ها باید اعمال شود نه container

• justify-self : تنظیم صفحه آرایی محتوای داخل item بصورت عمودی
• align-self : تنظیم صفحه آرایی محتوای داخل item بصورت افقی
• place-self : align-self justify-self; تنظیم همزمان صفحه آرایی محتوا داخل item بصورت عمودی و افقی

از مهمترین مقادیری که این ویژگی های میتونند بگیرند : sertech, start, end, center, space-between, space-around, space-evenly می باشند.

برای ویژگی justify-self مقادیر left و right را هم در نظر بگیرید.

grid-column-gap, column-gap, grid-row-gap, row-gap, grid-gap, gap

معمولا هنگامی که می‌خواهیم یک صفحه وب را طراحی کنیم، نیاز داریم تا المان‌ها کنار هم بچینیم و میانشان کمی فاصله نیز درنظر بگیریم. هدف Grid Gap همین است؛ با استفاده از Grid Gap می‌توان فواصل خالی نسبت به Grid Line را تعریف کرد.

grid-gap (یا gap) نیز همانند Grid Track یک مفهوم عمومی است و هم برای ردیف و هم برای ستون به‌کار می‌رود. در صورتی که بخواهیم به طور خاص بین ردیف‌ها فاصله بگذاریم از grid-row-gap (یا row-gap) و اگر بخواهیم ستون‌ها را از هم دور کنیم از grid-column-gap (یا column-gap) استفاده می‌کنیم:

.grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	/*
	gap: 7px; OR grid-gap: 7px;
	gap: 7px(row-gap) 12px(column-gap); OR grid-gap: 7px 12px;
	row-gap: 7px; OR grid-row-gap: 7px;
	column-gap: 12px; OR grid-column-gap: 12px;
	*/
}

• چنانچه از % برای مشخص کردن اندازه cellها استفاده کنید، با gap به مشکل بیرون زدگی از container مواجه می شوید در صورتی که با fr این مشکل به وجود نمی آید. چرا که fr فضای خالی را اندازه گیری می کند و gap را بعنوان فضای خالی حساب نمی کند.

grid-auto-columns, grid-auto-rows

• grid-auto-columns : اندازه‌ای را برای ستون‌ها در یک مخزن شبکه تعیین می‌کند. این ویژگی تنها بر روی ستون‌هایی که اندازه آن‌ها تنظیم نشده است تأثیر می‌گذارد. مقدار پیشفرض auto هست.
• grid-auto-rows : اندازه‌ای را برای ردیف‌ها در یک مخزن شبکه تعیین می‌کند. این ویژگی تنها بر روی ردیف‌هایی که اندازه آن‌ها تنظیم نشده است، تأثیر می‌گذارد. مقدار پیشفرض auto هست.

grid-auto-flow

grid-auto-flow کنترل می‌کند که آیتم‌های قرار داده شده به صورت خودکار چگونه در شبکه قرار می‌گیرند.

• row: مقدار پیشفرض و اولیه است که باعث می‌شود آیتم‌ها به همان حالت ردیفی کنار هم قرار بگیرند.
• column: المنت ها به‌صورت ستونی چیده شده و مکان‌ها را پر می‌کنند. وقتی ستون اول کامل پر می‌شود ستون دوم شروع به پر شدن می‌کند.
• dense: بعد از صفحه آرایی عادی آیتم‌ها یک بار دیگر به عقب برمی‌گردد و اگر فضای خالی در Grid وجود داشته باشد آن فضا را با اولین آیتمی که بعد از آن فضا وجود دارد و درون آن می‌تواند جای گیرد، پر می‌کند.
• row dense: آیتم‌ها را با پر کردن هر ردیف قرار داده و هر خال در شبکه را پر می‌کند.
• column dense: آیتم‌ها را با پر کردن هر ستون قرار داده و هر خال در شبکه را پر می‌کند.

.grid-container {
	grid-auto-flow: row|column|dense|row dense|column dense;
}

ویژگی های Grid Items

• grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area
• justify-self, align-self, place-self این موارد در بخش قبلی توضیح داده شدند.
• order

grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area

در یک شبکه (Grid) شما میتوانید موقعیت یک cell را دقیقا روی شبکه مشخص کنید، روش اینکار استفاده از پراپرتی های زیر است.

• grid-column-start از شماره ستون
• grid-column-end تا شماره ستون
• grid-row-start از شماره ردیف
• grid-row-end تا شماره ردیف

بواسطه این 4 مشخصه شما میتوانید چهار ضلعی را رسم کنید که دقیقاً مکان قرار گیری cell روی شبکه را مشخص می کند.

همچنین می توانید این ویژگی ها را بصورت تجمیع شده استفاده کنید :

• grid-column: start / end
• grid-row: start / end
• grid-area: row-start / column-start / row-end / column-end این ویژگی قابلیت دیگری نیز دارد که در بخش grid-template-areas به اون خواهیم پرداخت.

**نکته : ** فراموش نکنید شماره گذاری ستون ها و سطرها از 1 شروع می شود.

در صورتی که از grid-column یا grid-row برای قرار دادن آیتم‌ها روی گرید والدشان استفاده می‌کنید، می‌توانید از کلیدواژه span برای اجتناب از مشخص کردن خطوط انتهایی زمانی که آیتم‌ها باید بیش از یک ستون یا ردیف را در بر بگیرند، استفاده کنید.

با توجه به قانون CSS زیر برای یک آیتم گرید که ۳ ستون و ۲ ردیف را در بر می‌گیرد:

.item {
	grid-row: 1 / 3;
	grid-column: 2 / 5;
	/*
	grid-area: 1 / 2 / 3 / 5
	*/
}

می‌توانیم به جای آن از کلیدواژه span به این صورت استفاده کنیم:

.item {
	grid-row: 1 / span 2;
	grid-column: 2 / span 3;
	/*
	grid-area: 1 / 2 / span 2 / span 3
	*/
}

همچنین می‌توان خط انتهایی را مشخص کرد و از span به عنوان خط شروع استفاده کرد، در این حالت span به صورت معکوس عمل می‌کند، بنابراین موارد زیر نیز معادل هستند:

.item {
	grid-row: span 2 / 3;
	grid-column: span 3 / 5;
	/*
	grid-area: span 2 / span 3 / 3 / 5
	*/
}

order

وقتی از خاصیت order استفاده می‌کنید، به هر آیتم درون container یک مقدار عددی اختصاص می‌دهید. این مقدار عددی، ترتیب قرارگیری و نمایش آیتم‌ها در محور اصلیِ container را مشخص می‌کند (محور اصلی در flexbox ستون‌ها و در grid می‌تواند ستون‌ها یا ردیف‌ها باشد).

مواردی که مقدار ترتیب صریحی ندارند، مقدار پیش‌فرض 0 را دریافت می‌کنند.

فرآیند مرتب‌سازی آیتم‌ها بر اساس دو مرحله انجام می‌گیرد:

• مقدار order: آیتم‌هایی که مقدار order بالاتری دارند، در محور اصلی بعد از آیتم‌هایی با مقدار order پایین‌تر قرار می‌گیرند.
• ترتیب کد منبع (DOM): اگر به چند آیتم مقدار order یکسانی اختصاص داده شود، ترتیب قرارگیری آن‌ها بر اساس ترتیب کد منبع (DOM) خواهد بود. آیتم‌هایی که زودتر در کد HTML ظاهر شوند، مقدم بر آیتم‌هایی با کد دیرتر هستند.

به طور پیش فرض، اگر از خاصیت order استفاده نکنید، ترتیب صفحه آرایی آیتم‌ها بر اساس ترتیب کد منبع (DOM) خواهد بود. اما با order می‌توانید این ترتیب را به دلخواه تغییر دهید.

ویژگی های ترکیبی Grid Container & Items

• grid-area, grid-template-areas

grid-area, grid-template-areas

قبل تر با یکی از کاربردهای grid-area آشنا شدیم، یکی از کاربردهای دیگر این ویژگی نام گذاری cell برای تعیین ترازبندی توسط Grid Container است. یعنی ما یک نام برای سلول در نظر میگیریم و سپس محل قرارگیری آن را در Container مشخص می کنیم.

به واسطه ی ویژگی grid-template-areas ما طرح جایگیری سلول های نام گذاری شده بر روی شبکه خود را مشخص می کنیم. مثال زیر گویای همه چیز است.

.item1 {
	grid-area: header;
}
.item2 {
	grid-area: menu;
}
.item3 {
	grid-area: main;
}
.item4 {
	grid-area: right;
}
.item5 {
	grid-area: footer;
}
 
.grid-container {
	display: grid;
	grid-template-areas:
		'header header header header header header'
		'menu main main main right right'
		'menu footer footer footer footer footer';
}