CSS Grid یکی از قدرتمندترین ابزارهای CSS برای ساخت لایهبندیهای دو بعدی در صفحات وب است. درک صحیح قابلیتهای تراز کردن (Alignment) در Grid به شما کمک میکند تا موقعیت و فاصلهی عناصر را با دقت کنترل کنید و طراحیهای واکنشگرا و حرفهای بسازید.
در این مقاله با نحوهی استفاده از ویژگیهای justify-content، align-content، justify-items، align-items، justify-self و align-self آشنا میشویم و تفاوت آنها را با مثالهای عملی بررسی میکنیم.
نکات مهمی که یاد میگیرید
CSS Grid دو نوع سیستم تراز دارد:
تراز کردن کل Grid
تراز کردن آیتمها داخل سلولها
ویژگیهای justify-content و align-content فضای اضافی اطراف Grid را مدیریت میکنند.
ویژگیهای justify-items و align-items نحوه قرارگیری آیتمها داخل سلولهای Grid را مشخص میکنند.
با justify-self و align-self میتوانید فقط یک آیتم خاص را تنظیم کنید.
ویژگیهای خلاصه مثل place-content و place-items کدنویسی را سادهتر میکنند.
ترتیب منطقی HTML باید حفظ شود تا دسترسیپذیری سایت آسیب نبیند.
پیشنیازها
برای درک بهتر این مقاله بهتر است با موارد زیر آشنا باشید:
مفاهیم پایه CSS
نحوه کار با HTML
آشنایی ابتدایی با CSS Grid
CSS Grid چیست؟
CSS Grid یک سیستم لایهبندی دو بعدی در CSS است که امکان مدیریت همزمان سطرها و ستونها را فراهم میکند.
برخلاف Flexbox که فقط برای یک محور طراحی شده، Grid برای ساخت Layoutهای پیچیده و حرفهای بسیار مناسبتر است.
دو مفهوم مهم در Grid:
Grid Container
عنصر والد که روی آن display: grid قرار میگیرد.
Grid Item
فرزندان مستقیم Grid Container که داخل شبکه قرار میگیرند.
ساختار اولیه Grid
HTML
<div class=”grid-container”>
<div class=”grid-item”>1</div>
<div class=”grid-item”>2</div>
<div class=”grid-item”>3</div>
<div class=”grid-item”>4</div>
<div class=”grid-item”>5</div>
<div class=”grid-item”>6</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto;
width: 400px;
height: 200px;
background: #dceff7;
}
.grid-item {
width: 50px;
height: 50px;
background: #FBF2C0;
}
تراز کردن کل Grid
این ویژگیها روی خود Grid اعمال میشوند.
ویژگی justify-content
این ویژگی Grid را در محور افقی تراز میکند.
مقادیر مهم
مقدار توضیح
start قرارگیری از ابتدا
end قرارگیری از انتها
center وسطچین افقی
space-between فاصله مساوی بین ستونها
space-around فاصله مساوی اطراف ستونها
space-evenly فاصله مساوی همه بخشها
مثال
.grid-container {
justify-content: center;
}
ویژگی align-content
این ویژگی Grid را در محور عمودی تراز میکند.
مثال
.grid-container {
align-content: space-evenly;
}
ویژگی place-content
نسخه خلاصه شدهی:
justify-content
align-content
مثال
.grid-container {
place-content: center;
}
یا:
.grid-container {
place-content: end space-between;
}
تراز کردن آیتمها داخل سلولها
ویژگی justify-items
آیتمها را در محور افقی داخل سلولها تراز میکند.
مثال
.grid-container {
justify-items: center;
}
ویژگی align-items
آیتمها را در محور عمودی داخل سلولها تراز میکند.
مثال
.grid-container {
align-items: end;
}
ویژگی place-items
ترکیب:
justify-items
align-items
مثال
.grid-container {
place-items: center;
}
تغییر تراز فقط یک آیتم
گاهی لازم است فقط یک آیتم متفاوت رفتار کند.
ویژگی justify-self
تنظیم افقی یک آیتم خاص
مثال
.grid-container {
justify-items: start;
}
.grid-item:nth-child(3) {
justify-self: end;
}
ویژگی align-self
تنظیم عمودی یک آیتم خاص
مثال
.grid-container {
align-items: center;
}
.grid-item:nth-child(3) {
align-self: start;
}
ویژگی place-self
نسخه خلاصه شده:
justify-self
align-self
مثال
.grid-item:nth-child(3) {
place-self: end end;
}
ترکیب ویژگیهای Align و Justify
میتوانید همزمان از چند ویژگی استفاده کنید.
مثال
.grid-container {
display: grid;
justify-content: space-evenly;
align-content: space-evenly;
justify-items: center;
align-items: center;
}
مثال واقعی: وسطچین کردن فرم ورود
CSS
body {
height: 100vh;
display: grid;
place-items: center;
}
این سادهترین روش برای قرار دادن یک عنصر دقیقاً وسط صفحه است.
مثال واقعی: ساخت کارتهای واکنشگرا
.card-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
align-items: stretch;
}
ویژگی stretch باعث میشود همه کارتها همارتفاع شوند.
مثال واقعی: هدر سایت
CSS
.main-header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
.main-nav {
justify-self: end;
}
در این حالت لوگو سمت چپ و منو سمت راست قرار میگیرد.
نکات مهم درباره دسترسیپذیری (Accessibility)
ترتیب HTML باید منطقی باقی بماند.
کاربران Screen Reader و کیبورد براساس ترتیب HTML حرکت میکنند، نه ظاهر صفحه.
بنابراین فقط ظاهر عناصر را تغییر دهید و ساختار منطقی صفحه را به هم نریزید.
نکات مهم درباره Performance
از انیمیت کردن Grid Trackها خودداری کنید
مثلاً این کار سنگین است:
grid-template-columns
بهتر است از:
transform
استفاده کنید.
بهترین روشها
از shorthandها استفاده کنید
place-items
place-content
place-self
کد را تمیزتر میکنند.
تفاوت Content و Items را بدانید
ویژگی کاربرد
*-content تنظیم کل Grid
*-items تنظیم آیتمها داخل سلول
برای Layoutهای واکنشگرا از fr استفاده کنید
grid-template-columns: 1fr 1fr 1fr;
سوالات متداول
تفاوت justify-content و justify-items چیست؟
justify-content کل Grid را جابهجا میکند.
justify-items آیتمها را داخل سلولها تنظیم میکند.
سادهترین روش وسطچین کردن یک div چیست؟
body {
display: grid;
place-items: center;
height: 100vh;
}
چه زمانی Grid بهتر از Flexbox است؟
Grid → لایهبندی دو بعدی
Flexbox → لایهبندی تکبعدی
جمعبندی
ویژگیهای Align و Justify در CSS Grid کنترل فوقالعادهای روی چیدمان عناصر به شما میدهند.
اگر تفاوت بین:
تراز کل Grid
تراز آیتمها داخل سلولها
را به خوبی درک کنید، میتوانید Layoutهای حرفهای، تمیز و واکنشگرا بسازید.
از همراهی شما با پارمین کلود سپاسگزاریم.
