نحوه استفاده از خطوط نام‌گذاری شده در CSS Grid Layout

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

استفاده از خطوط نام‌گذاری شده مزایای متعددی دارد. اول اینکه زمانی که تعداد زیاد خطوط یا المان داریم، خواندن و درک کد راحت‌تر می‌شود. دوم اینکه با خطوط نام‌گذاری شده می‌توانیم تغییرات در گراید را با انعطاف‌پذیری بیشتری اعمال کنیم بدون نیاز به بروز رسانی همه اعداد. همچنین، این روش وقتی تیم به‌صورت مشترک روی یک پروژه کار می‌کند، باعث خواهد شد کدها به راحت‌تر قابل فهم باشند.

خطوط نام‌گذاری شده در CSS Grid با استفاده از قوانین 'grid-template-columns' و 'grid-template-rows' تعریف می‌شوند. در این قوانین، ما می‌توانیم خطوط را با استفاده از [نام] مشخص کنیم. برای مثال، اگر ستونی با نام 'main-start' و 'main-end' داشته باشیم، می‌توانیم المان‌هایی که بین این خطوط قرار می‌گیرند را به آسانی تعریف کنیم.

برای به کارگیری خطوط نام‌گذاری شده، ابتدا باید با اصول اولیه Grid Layout آشنا شوید. بعد از آن، می‌توانید به راحتی از نام‌ها در کنار سایر ویژگی‌های CSS Grid مانند grid-gap، grid-area و غیره استفاده کنید. بیایید با مثال ساده، این مفهوم را در عمل ببینیم.

مثالی از Grid Layout با خطوط نام‌گذاری شده

.grid-container {
  display: grid;
  grid-template-columns: [main-start] 1fr [main-end];
  grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end];
  grid-template-areas:
    "header"
    "main"
    "footer";
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

توضیح کد