M

MLOG

فارسی

CSS Subgrid را کاوش کنید و یاد بگیرید چگونه چیدمان‌های تودرتوی پیچیده، واکنش‌گرا و قابل نگهداری برای طراحی وب مدرن ایجاد کنید. بر تکنیک‌های پیشرفته گرید مسلط شوید.

CSS Subgrid: آزاد کردن قدرت چیدمان‌های تودرتو

CSS Grid با ارائه انعطاف‌پذیری و کنترل بی‌نظیر، انقلابی در چیدمان وب ایجاد کرده است. با این حال، مدیریت گرید‌های تودرتو گاهی اوقات می‌تواند دست‌وپاگیر شود. اینجاست که CSS Subgrid به کمک می‌آید. Subgrid به یک آیتم گرید اجازه می‌دهد تا اندازه‌بندی ترک (track) والد خود را به ارث ببرد، که این امر چیدمان‌های پیچیده را ساده‌تر کرده و کد شما را قابل نگهداری‌تر می‌کند. این مقاله یک راهنمای جامع برای درک و پیاده‌سازی CSS Subgrid، همراه با مثال‌های عملی و بینش‌هایی برای توسعه‌دهندگان در همه سطوح ارائه می‌دهد.

CSS Subgrid چیست؟

Subgrid یک ویژگی از CSS Grid است که به یک آیتم گرید امکان می‌دهد تا خود به یک گرید تبدیل شود و ترک‌های سطر و ستون تعریف شده توسط گرید والد خود را به ارث ببرد. این بدان معناست که شما می‌توانید محتوا را در چندین گرید تودرتو تراز کنید بدون اینکه نیاز به تعریف صریح اندازه‌های ترک در هر گرید تودرتو داشته باشید. آن را به عنوان راهی برای گسترش ساختار گرید والد به فرزندانش در نظر بگیرید که یک چیدمان منسجم‌تر و سازگارتر ایجاد می‌کند.

چرا از Subgrid استفاده کنیم؟

سازگاری با مرورگرها

قبل از شروع پیاده‌سازی، بررسی سازگاری با مرورگرها ضروری است. از اواخر سال ۲۰۲۳، Subgrid از پشتیبانی خوبی در مرورگرهای مدرن از جمله Chrome، Firefox، Safari و Edge برخوردار است. با این حال، همیشه تمرین خوبی است که از Can I use برای بررسی آخرین وضعیت پشتیبانی استفاده کنید.

پیاده‌سازی پایه Subgrid

بیایید با یک مثال ساده شروع کنیم تا مفاهیم اساسی Subgrid را نشان دهیم.

ساختار HTML

ابتدا، ساختار HTML پایه را برای گرید خود تعریف می‌کنیم.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

استایل‌دهی CSS

اکنون، بیایید CSS را برای ایجاد گرید والد و ساب‌گرید درون عنصر .content تعریف کنیم.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

در این مثال، عنصر .content به عنوان یک ساب‌گرید تعریف شده است. ویژگی‌های grid-template-columns: subgrid; و grid-template-rows: subgrid; به ساب‌گرید دستور می‌دهند که اندازه‌بندی ترک را از گرید والد به ارث ببرد. اکنون ناحیه محتوا با اندازه‌بندی ترک تعریف شده در گرید کانتینر اصلی مطابقت دارد، بدون اینکه نیازی به تنظیمات صریح برای خود ساب‌گرید باشد. این امر ترازبندی کامل بین سایدبار و آیتم‌های درون ناحیه محتوا را تضمین می‌کند.

تکنیک‌های پیشرفته Subgrid

گسترش روی ترک‌ها (Spanning Tracks)

Subgrid همچنین به آیتم‌های درون ساب‌گرید اجازه می‌دهد تا مانند یک گرید معمولی، روی چندین ترک گسترش یابند. این امر انعطاف‌پذیری بیشتری در ایجاد چیدمان‌های پیچیده فراهم می‌کند.


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

این کد باعث می‌شود .item-1 در دو ستون اول ساب‌گرید گسترش یابد.

خطوط گرید نام‌گذاری شده

شما می‌توانید از خطوط گرید نام‌گذاری شده با Subgrid برای وضوح و کنترل بیشتر استفاده کنید. فرض کنید خطوط نام‌گذاری شده‌ای در گرید والد خود دارید:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

سپس می‌توانید به این خطوط نام‌گذاری شده در ساب‌گرید خود ارجاع دهید:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

مدیریت ترک‌های ضمنی (Implicit Tracks)

اگر تعداد آیتم‌های گرید از تعداد ترک‌های تعریف شده در گرید والد بیشتر شود، Subgrid ترک‌های ضمنی ایجاد خواهد کرد. شما می‌توانید اندازه این ترک‌های ضمنی را با استفاده از ویژگی‌های grid-auto-rows و grid-auto-columns کنترل کنید، مشابه با CSS Grid معمولی.

مثال‌های عملی و موارد استفاده

بیایید چند مثال عملی از نحوه استفاده از Subgrid برای ایجاد چیدمان‌های پیچیده را بررسی کنیم.

لیست محصولات پیچیده

یک لیست محصول را تصور کنید که در آن می‌خواهید جزئیات متعدد محصول (تصویر، نام، توضیحات، قیمت) را به شیوه‌ای سازگار و تراز شده نمایش دهید. Subgrid می‌تواند به راحتی به این هدف کمک کند.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

در این مثال، عناصر .product از Subgrid برای تراز کردن تصویر، نام، توضیحات و قیمت به طور سازگار در همه محصولات استفاده می‌کنند، حتی اگر طول محتوای آنها متفاوت باشد. این امر یک نمایش تمیز و حرفه‌ای را تضمین می‌کند.

چیدمان مجله‌ای

ایجاد چیدمان‌های به سبک مجله با بلوک‌های محتوای متغیر می‌تواند چالش‌برانگیز باشد. Subgrid با اجازه دادن به شما برای تراز کردن عناصر در بخش‌های مختلف چیدمان، این فرآیند را ساده می‌کند.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

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

چیدمان فرم‌ها

ایجاد چیدمان‌های پیچیده فرم با برچسب‌ها و ورودی‌های تراز شده می‌تواند دشوار باشد. Subgrid یک راه حل ساده ارائه می‌دهد.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}

در اینجا، عناصر .form-row از Subgrid برای تراز کردن برچسب‌ها و فیلدهای ورودی به طور سازگار در تمام سطرها استفاده می‌کنند. اندازه‌های ترک در گرید والد (.form-grid) تعریف شده‌اند که ظاهری یکنواخت را تضمین می‌کند.

بهترین شیوه‌ها و ملاحظات

Subgrid در مقابل CSS Grid معمولی

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

عیب‌یابی مشکلات رایج

نتیجه‌گیری

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

منابع بیشتر