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

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

CSS Subgrid چیست؟

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

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

• چیدمان‌های ساده‌تر: Subgrid پیچیدگی گرید‌های تودرتو را کاهش می‌دهد و کد CSS شما را تمیزتر و قابل فهم‌تر می‌کند.
• ترازبندی سازگار: به راحتی محتوا را در چندین سطح از تودرتویی تراز کنید و از یک طراحی بصری جذاب و حرفه‌ای اطمینان حاصل کنید.
• قابلیت نگهداری بهبود یافته: تغییرات در گرید والد به طور خودکار به ساب‌گریدها منتقل می‌شود و نیاز به تنظیمات دستی در چندین مکان را کاهش می‌دهد.
• واکنش‌گرایی پیشرفته: 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>

            

              
                Copy
              
            
          

استایل‌دهی 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; }



            

              
                Copy
              
            
          

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

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

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

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

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

            

              
                Copy
              
            
          

این کد باعث می‌شود .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;
}

            

              
                Copy
              
            
          

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

            
.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;
}

            

              
                Copy
              
            
          

مدیریت ترک‌های ضمنی (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>

            

              
                Copy
              
            
          

            
.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;
}

            

              
                Copy
              
            
          

در این مثال، عناصر .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>

            

              
                Copy
              
            
          

            
.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;
}


            

              
                Copy
              
            
          

در این مثال، مقاله اصلی، مقاله سایدبار و تصویر ویژه همگی از یک ساختار گرید مشترک استفاده می‌کنند و از تراز سازگار عناوین و محتوا در بخش‌های مختلف اطمینان می‌دهند. استفاده از 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>

            

              
                Copy
              
            
          

            
.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;
}


            

              
                Copy
              
            
          

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

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

• با یک بنیاد گرید محکم شروع کنید: قبل از پیاده‌سازی Subgrid، اطمینان حاصل کنید که گرید والد شما به خوبی تعریف شده و واکنش‌گرا است.
• از خطوط گرید نام‌گذاری شده استفاده کنید: خطوط گرید نام‌گذاری شده خوانایی و قابلیت نگهداری را بهبود می‌بخشند، به ویژه در چیدمان‌های پیچیده.
• به طور کامل تست کنید: چیدمان‌های Subgrid خود را در مرورگرها و دستگاه‌های مختلف تست کنید تا از رندر سازگار اطمینان حاصل کنید.
• دسترس‌پذیری را در نظر بگیرید: با استفاده از HTML معنایی و ارائه ویژگی‌های ARIA مناسب، اطمینان حاصل کنید که چیدمان‌های Subgrid شما برای کاربران دارای معلولیت قابل دسترس هستند.
• از Subgrid بیش از حد استفاده نکنید: در حالی که Subgrid قدرتمند است، همیشه بهترین راه حل نیست. برای چیدمان‌های کمتر پیچیده، جایگزین‌های ساده‌تری مانند Flexbox یا Grid معمولی را در نظر بگیرید.

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

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

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

• کار نکردن Subgrid: سازگاری مرورگر خود را دوباره بررسی کنید و اطمینان حاصل کنید که Subgrid را با تنظیم grid-template-columns: subgrid; و/یا grid-template-rows: subgrid; بر روی عنصر ساب‌گرید فعال کرده‌اید.
• مشکلات ترازبندی: بررسی کنید که اندازه‌های ترک در گرید والد شما به درستی تعریف شده باشند و آیتم‌های ساب‌گرید به درستی با استفاده از grid-column و grid-row موقعیت‌دهی شده باشند.
• شکست‌های غیرمنتظره چیدمان: چیدمان خود را در اندازه‌های مختلف صفحه تست کنید تا هرگونه مشکل طراحی واکنش‌گرا را شناسایی و برطرف کنید.

نتیجه‌گیری

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

منابع بیشتر

• اسناد وب MDN: CSS Subgrid
• مجله Smashing: CSS Grid Subgrid
• CSS-Tricks: CSS Grid Subgrids