راهنمای کامل آموزش Grid در CSS
اگر مطلب نقشه راه برنامه نویسی فرانت اند را خوانده باشید، یکی از مفاهیم مهم در CSS یادگیری و آموزش Grid است. ابزاری قدرت‌مند برای پیاده‌سازی Layout و چیدمان صفحات وب سایت.
CSS Grid Layout (با نام مستعار “Grid” یا “CSS Grid”)، یک سیستم طرح‌بندی مبتنی بر شبکه دو بعدی است که در مقایسه با هر سیستم چیدمان وب قدیمی، نحوه طراحی فرانت‌اند را کاملاً تغییر داده‌است. CSS از قدیم برای چیدمان صفحات وب استفاده شده، اما مشکلاتی را داشته است. ابتدا از Table، سپس Float، بعد position و نهایتاً inline-block استفاده کردیم، اما همه این روش‌ها اساساً کارایی کاملی نداشتند. همچنین Flexbox یک ابزار چیدمان بسیار عالی است، اما چیدمان یک‌بعدی آن دست و بال ما را می‌بندد و همه نیازمان را برطرف نمی‌کند! Grid اولین ماژول CSS است که به طور خاص برای حل مشکلات چیدمان ایجاد شده است.
اصطلاحات مهم Grid
ظرف یا Container
المنتی که مقدار display آن به صورت grid تعیین می‌شود. والد مستقیم همه آیتم‌های شبکه است.
<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>
خط یا Grid Line
خطوط جداکننده‌ای که ساختار شبکه را تشکیل می‌دهند. می‌توانند عمودی یا افقی باشند و در دو طرف یک سطر یا ستون قرار بگیرند. در اینجا خط زرد نمونه‌ای از خط grid است.
شیار یا Grid Track
فضای بین دو خط مجاور در گرید. می‌توانید آنها را به عنوان ستون‌ها یا ردیف‌های شبکه در نظر بگیرید. در اینجا شیار شبکه بین خطوط دوم و سوم افقی‌ست.
ناحیه یا Grid Area
کل فضایی که توسط چهار خط شبکه احاطه شده است. یک ناحیه شبکه ممکن است از هر تعداد سلول شبکه تشکیل شده باشد. در اینجا ناحیه شبکه بین خطوط شبکه ردیف 1 و 3 و خطوط شبکه ستون 1 و 3 است.
آیتم یا Grid Item
به همه المنت‌هایی که فرزند مستقیم ظرف یا container گرید هستند، آیتم‌های grid گفته می‌شود. فرزندان مرتبه‌های بعدی آیتم container به حساب نمی‌آیند.
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>
سلول یا Grid Cell
برای یادگیری جامع این مبحث، می‌توانید دوره آموزشی کپسول Flex و Grid را تهیه کنید.
ویژگی‌های گرید (Grid)
ویژگی‌های ظرف یا container (المنت والد)
ویژگی display
یک المنت را به عنوان یک ظرف grid تعریف می‌کند و یک زمینه قالب‌بندی شبکه جدید برای محتویات آن ایجاد می‌کند. مقدار grid یک شبکه block-level و مقدار inline-grid یک شبکه inline-level می سازد.
.container {
display: grid | inline-grid;
}
ردیف و ستون قالب گرید
دو ویژگی grid-template-columns و grid-template-rows برای مشخص کردن ستون‌ها و ردیف‌های شبکه گرید ماست. می‌تواند لیستی از مقادیر را به کمک یک فاصله (space) بین هر یک بگیرد. هر مقدار مشخص کننده اندازه آن track در ستون یا ردیف است و فاصله (space یا نامی دلخواه) مشخص کننده خط گرید (grid line) ما خواهد بود.
.container {
grid-template-columns: ... ...;
/* e.g.
1fr 1fr
minmax(10px, 1fr) 3fr
repeat(5, 1fr)
50px auto 100px 1fr
*/
grid-template-rows: ... ...;
/* e.g.
min-content 1fr min-content
100px 1fr max-content
*/
}
خطوط گرید به صورت اتوماتیک از عدد ۱ شروع می‌شود و اعداد منفی از (1-) به خط آخر اشاره می‌کند و به خطوط اول grid می‌رسد.
به جای شماره، می‌توانیم از نامگذاری هم برای خطوط داخل کروشه یعنی [ و ] استفاده کنیم:
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
هر خط می‌تواند چندین اسم مختلف داشته باشد. کافیست داخل کروشه با یک فاصله اسم‌ها را از هم جدا کنیم. مثل نام‌های row1-end و row2-start در کد زیر:
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
واحد fr در شبکه grid
این واحد اندازه‌گیری به شما اجازه می‌دهد فضای باقی‌مانده در container را بین آیتم‌ها تقسیم کنید. مثلاً کد زیر سه ستون که اولی دو برابر دیگران است ایجاد می‌کند:
.container {
grid-template-columns: 2fr 1fr 1fr;
}
اگر بین این مقادیر انعطاف پذیر مقدار ثابتی باشد، مثل کد زیر که یک ستون ۵۰px ای داریم، ابتدا فضایی به اندازه پنجاه پیکسل به ستون دوم داده می‌شود، سپس فضای باقی‌مانده بین ۳ ستون دیگر به طور مساوی تقسیم می‌شود.
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
Template Area در گرید
ویژگی grid-template-areas با ارجاع به نام ناحیه گرید که با ویژگی grid-area مشخص شده‌اند، یک الگوی شبکه را تعریف می‌کند. تکرار نام یک ناحیه شبکه باعث می شود که محتوا در آن سلول‌ها قرار بگیرد. نقطه به معنای یک سلول خالی است. خود سینتکس، تصویری از ساختار شبکه ارائه می‌دهد.
مثال:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
با این کار، شبکه‌ای به عرض چهار ستون و سه ردیف بلند ایجاد می‌شود. کل ردیف بالا از ناحیه Header تشکیل خواهد شد. ردیف میانی از دو ناحیه اصلی، یک سلول خالی و یک ناحیه نوار کناری تشکیل شده است. ردیف آخر Footer است.
نکات:
هر ردیف در اعلان شما باید تعداد سلول‌های یکسانی داشته باشد.
می‌توانید از هر تعداد نقطه مجاور برای اعلام یک سلول خالی استفاده کنید. تا زمانی که بین اسامی مشابه فاصله‌ای وجود نداشته باشد، یک سلول واحد ساخته می‌شود.
توجه داشته باشید که با این شیوه، خطوط گرید نامگذاری نمی‌شود، بلکه فقط محدوده‌ها نامگذاری می‌شوند. هنگامی که از این سینتکس استفاده می‌کنید، خطوط در دو انتهای محدوده‌ها به طور خودکار نامگذاری می‌شوند. اگر نام ناحیه شبکه شما foo باشد، نام خط سطر شروع محدوده و خط ستون شروع foo-start و نام خط آخر سطر و خط آخرین ستون آن foo-end خواهد بود. این به این معنی است که برخی از خطوط ممکن است چندین نام داشته باشند، مانند خط سمت چپ در مثال بالا، که دارای سه نام است: header-star و main-start و footer-start
ویژگی‌های آیتم‌ها (المنت‌های فرزند)
شروع و پایان ردیف و ستون گرید
مکان یک آیتم grid را در داخل شبکه تعیین می‌کند. ویژگی
grid-column-start یا grid-row-start خطی است که آیتم از آنجا شروع می‌شود و grid-column-end یا grid-row-end خطی است که آیتم به پایان می‌رسد.
- <line> – می‌تواند یک عدد برای اشاره به یک خط شبکه شماره‌گذاری‌شده یا نامی برای اشاره به یک خط شبکه نام‌گذاری‌شده باشد.
- <span <number – به اندازه عددی که مقابل span قرار می‌دهیم شیارهایی را به آیتم اختصاص می‌دهد.
- <span <name – آیتم تا زمانی که به خط بعدی با نام ارائه شده برخورد کند، در سراسر آن قرار می‌گیرد.
- auto – قرارگیری خودکار، یک بازه خودکار یا یک بازه پیش‌فرض را مشخص می‌کند.
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
مثال:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
اگر grid-column-end و grid-row-end اعلام نشده باشد، آیتم به طور پیش‌فرض 1 شیار را در بر می‌گیرد.
ردیف و ستون گرید
برای خلاصه‌نویسی دستورات:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
می‌شود از ویژگی grid-column و grid-row استفاده کرد.
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
مثال:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
منبع: با افتخار از css-tricks.com
این مطلب به دلیل محتوای زیادی که دارد در حال بروز رسانی‌ست. روزهای آینده مجدد به آن سر بزنید.
دیدگاهتان را بنویسید