M

MLOG

العربية

استكشف شبكة CSS الفرعية (Subgrid) وتعلم كيفية إنشاء تخطيطات متداخلة معقدة وسريعة الاستجابة وقابلة للصيانة لتصميم الويب الحديث. أتقن تقنيات الشبكة المتقدمة.

شبكة CSS الفرعية (Subgrid): إطلاق العنان لقوة التخطيطات المتداخلة

أحدثت شبكة CSS (CSS Grid) ثورة في تخطيط صفحات الويب، مقدمةً مرونة وتحكماً لا مثيل لهما. ومع ذلك، يمكن أن تصبح إدارة الشبكات المتداخلة مرهقة في بعض الأحيان. وهنا يأتي دور شبكة CSS الفرعية (Subgrid) لإنقاذ الموقف. تسمح الشبكة الفرعية لعنصر الشبكة بأن يرث أحجام المسارات من شبكته الأم، مما يبسط التخطيطات المعقدة ويجعل الكود الخاص بك أكثر قابلية للصيانة. يقدم هذا المقال دليلاً شاملاً لفهم وتطبيق شبكة CSS الفرعية، مع أمثلة عملية ورؤى للمطورين من جميع المستويات.

ما هي شبكة CSS الفرعية (Subgrid)؟

الشبكة الفرعية هي ميزة في شبكة CSS تمكّن عنصر الشبكة من أن يصبح شبكة بحد ذاته، ويرث مسارات الصفوف والأعمدة المحددة في شبكته الأم. هذا يعني أنه يمكنك محاذاة المحتوى عبر شبكات متداخلة متعددة دون تحديد أحجام المسارات بشكل صريح في كل شبكة متداخلة. فكر في الأمر كطريقة لتوسيع هيكل الشبكة الأم إلى عناصرها الأبناء، مما يخلق تخطيطاً أكثر تماسكاً واتساقاً.

لماذا نستخدم الشبكة الفرعية (Subgrid)؟

توافق المتصفحات

قبل الغوص في التنفيذ، من الضروري التحقق من توافق المتصفحات. اعتباراً من أواخر عام 2023، تتمتع الشبكة الفرعية بدعم جيد عبر المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، من الممارسات الجيدة دائماً استخدام Can I use للتحقق من أحدث حالة للدعم.

التنفيذ الأساسي للشبكة الفرعية (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)

التمدد عبر المسارات

تسمح الشبكة الفرعية أيضاً للعناصر داخلها بالتمدد عبر مسارات متعددة، تماماً كما في الشبكة العادية. وهذا يوفر مرونة أكبر في إنشاء تخطيطات معقدة.


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

هذا الكود سيجعل .item-1 يمتد عبر أول عمودين من الشبكة الفرعية.

خطوط الشبكة المسماة

يمكنك استخدام خطوط الشبكة المسماة مع الشبكة الفرعية لمزيد من الوضوح والتحكم. لنفترض أن لديك خطوطاً مسماة في شبكتك الأم:


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

التعامل مع المسارات الضمنية

إذا تجاوز عدد عناصر الشبكة عدد المسارات المحددة في الشبكة الأم، فستقوم الشبكة الفرعية بإنشاء مسارات ضمنية. يمكنك التحكم في حجم هذه المسارات الضمنية باستخدام الخاصيتين grid-auto-rows و grid-auto-columns، بشكل مشابه لشبكة CSS العادية.

أمثلة عملية وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية لكيفية استخدام الشبكة الفرعية لإنشاء تخطيطات متطورة.

قائمة منتجات معقدة

تخيل قائمة منتجات حيث تريد عرض تفاصيل متعددة للمنتج (صورة، اسم، وصف، سعر) بطريقة متسقة ومتناسقة. يمكن للشبكة الفرعية أن تساعد في تحقيق ذلك بسهولة.


<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 الشبكة الفرعية لمحاذاة الصورة والاسم والوصف والسعر بشكل متسق عبر جميع المنتجات، حتى لو اختلفت أطوال محتوياتها. هذا يضمن عرضاً نظيفاً واحترافياً.

تخطيط بنمط المجلات

قد يكون إنشاء تخطيطات بنمط المجلات مع كتل محتوى متفاوتة أمراً صعباً. تبسط الشبكة الفرعية هذه العملية من خلال السماح لك بمحاذاة العناصر عبر أقسام مختلفة من التخطيط.


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

في هذا المثال، يتشارك المقال الرئيسي والمقال الجانبي والصورة المميزة في نفس هيكل الشبكة، مما يضمن محاذاة متسقة للعناوين والمحتوى عبر الأقسام المختلفة. إن استخدام الشبكة الفرعية يبسط كود CSS ويجعل التخطيط أكثر قابلية للصيانة.

تخطيطات النماذج

قد يكون إنشاء تخطيطات نماذج معقدة مع تسميات وحقول إدخال متناسقة أمراً صعباً. توفر الشبكة الفرعية حلاً مباشراً.


<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 الشبكة الفرعية لمحاذاة التسميات وحقول الإدخال بشكل متسق عبر جميع الصفوف. يتم تحديد أحجام المسارات في الشبكة الأم (.form-grid)، مما يضمن مظهراً موحداً.

أفضل الممارسات والاعتبارات

الشبكة الفرعية (Subgrid) مقابل شبكة CSS العادية

بينما تعد كل من الشبكة الفرعية وشبكة CSS أدوات تخطيط قوية، إلا أنهما تخدمان أغراضاً مختلفة. تعد شبكة CSS العادية مثالية لإنشاء تخطيطات الصفحة العامة وتحديد الهيكل الأساسي للمحتوى الخاص بك. من ناحية أخرى، تعتبر الشبكة الفرعية الأنسب لإدارة التخطيطات المتداخلة ومحاذاة المحتوى عبر مستويات متعددة من التداخل. فكر في الشبكة الفرعية كامتداد لشبكة CSS يبسط سيناريوهات التخطيط المعقدة.

استكشاف المشكلات الشائعة وإصلاحها

الخاتمة

تعد شبكة CSS الفرعية إضافة قيمة إلى مجموعة أدوات شبكة CSS، حيث تقدم طريقة قوية لإدارة التخطيطات المتداخلة المعقدة وإنشاء تصميمات ويب جذابة بصرياً وقابلة للصيانة وسريعة الاستجابة. من خلال فهم المفاهيم الأساسية واستكشاف الأمثلة العملية، يمكنك الاستفادة من الشبكة الفرعية لبناء تخطيطات متطورة كان من الصعب أو المستحيل تحقيقها سابقاً بالتقنيات التقليدية لـ CSS. تبنى الشبكة الفرعية وافتح إمكانيات جديدة في مشاريع تطوير الويب الخاصة بك. تسمح لك الشبكة الفرعية بتوسيع قوة شبكة CSS حقاً إلى العناصر المتداخلة، مما يتيح مزيداً من التحكم وقابلية صيانة الكود. جربها واستكشف المزايا في تبسيط تخطيطات CSS المعقدة.

مصادر إضافية