چیدمان 12 ستونه (Grid 12-column Layout)
چیدمان 12 ستونه یعنی تقسیم عرض صفحه به 12 ستون برابر. با گرید (Grid) این کار ساده می شود. اصطلاح «ستون (Column)» یعنی بخش عمودی. همچنین «رسانه کوئری (Media Query)» یعنی قانون واکنش گرا برای اندازه های مختلف صفحه.
مزیت های چیدمان 12 ستونه
این الگو منعطف است؛ چون 12 بخش پذیر است. بنابراین نصف، یک سوم، و یک چهارم راحت می شود. همچنین برای واکنش گرایی عالی است و طراحی را سریع تر می کند.
تعریف کانتینر گرید
روی ظرف اصلی «display: grid;» می گذاریم. سپس ستون ها را با «grid-template-columns» می سازیم. واحد «1fr» یعنی سهم برابر از فضا.
ساخت 12 ستون برابر
با «repeat(12, [col-start] 1fr)» دوازده ستون مساوی می سازیم. نام خط «col-start» برای چیدمان دقیق کمک می کند.
قرار دادن آیتم ها روی ستون ها
با «grid-column» آیتم را جابه جا می کنیم. می توانیم از «span» برای کشیدن روی چند ستون استفاده کنیم.
واکنش گرا با Media Query
اول موبایل را بچین. سپس با آستانه ها، دو ستونه و سه ستونه شو. ترتیب منبع کد، روی موبایل حفظ می شود.
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}
گام های عملی
- یک ظرف با کلاس container بساز.
- display: grid را اعمال کن.
- 12 ستون با repeat تعریف کن.
- برای هر بخش، grid-column را تنظیم کن.
- با media query چینش را واکنش گرا کن.
نکته: از واحد «fr» برای ستون های سیال استفاده کن. سپس با «gap» فاصله شبکه را تنظیم کن.
جمع بندی سریع
- 12 ستون، پایه طراحی واکنش گراست.
- repeat(12, 1fr) کار را سریع می کند.
- grid-column جابه جایی آیتم ها را ساده می کند.
- از موبایل فرست شروع کن.
برای ادامه، ترتیب آیتم شبکه و تراز آیتم شبکه را ببین. همچنین، راهنمای چیدمان 12 ستونه را به عنوان مرجع نگه دار.