حاوية Grid: المسارات والفجوات والقوالب

مقدمة في تخطيط CSS Grid

تخطيط CSS Grid هو اقوى نظام تخطيط متاح في CSS. على عكس Flexbox، الذي هو في الاساس نموذج تخطيط احادي البعد (يتعامل مع الصفوف او الاعمدة في وقت واحد)، فان CSS Grid هو نظام تخطيط ثنائي الابعاد يتيح لك التحكم في كل من الاعمدة والصفوف في وقت واحد. هذا يجعل Grid الخيار المثالي لبناء تخطيطات الصفحات الكاملة وترتيبات المكونات المعقدة واي تصميم تحتاج فيه الى تحكم دقيق في كل من الوضع الافقي والعمودي.

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

في هذا الدرس، سنركز بالكامل على حاوية grid -- العنصر الاب الذي ينشئ سياق الشبكة. ستتعلم كيفية تعريف المسارات (الاعمدة والصفوف)، والتحكم في الفجوات بينها، واستخدام دوال التحجيم القوية مثل fr وrepeat() وminmax()، وفهم الفرق بين الشبكات الصريحة والضمنية، والتحكم في كيفية تدفق العناصر تلقائيا، وتسمية خطوط الشبكة، واستخدام اختصارات القوالب. اتقان خصائص الحاوية هو الاساس لكل شيء ستفعله مع Grid.

تفعيل Grid: display: grid و display: inline-grid

لانشاء حاوية grid، تطبق display: grid او display: inline-grid على عنصر. هذا يحول العنصر الى حاوية grid وجميع ابنائه المباشرين يصبحون عناصر grid. الفرق بين grid وinline-grid مطابق للفرق بين block وinline-block: حاوية grid تتصرف كعنصر على مستوى الكتلة (تأخذ العرض الكامل المتاح وتبدأ على سطر جديد)، بينما حاوية inline-grid تتصرف كعنصر على مستوى السطر (تأخذ فقط العرض المطلوب وتتدفق مع المحتوى المحيط).

/* حاوية grid على مستوى الكتلة */
.grid-container {
    display: grid;
    /* هذا العنصر الان ينشئ سياق تنسيق grid */
    /* جميع الابناء المباشرين يصبحون عناصر grid */
}

/* حاوية grid على مستوى السطر */
.inline-grid-container {
    display: inline-grid;
    /* يتصرف مثل inline-block خارجيا */
    /* الابناء لا يزالون عناصر grid داخليا */
}

<div class="wrapper">
    <p>نص قبل الشبكة.</p>

    <div class="grid-container">
        <div>عنصر 1</div>
        <div>عنصر 2</div>
        <div>عنصر 3</div>
    </div>

    <p>نص بعد الشبكة.</p>
</div>

مع display: grid، تأخذ الحاوية العرض الكامل وتظهر الفقرات فوقها وتحتها. مع display: inline-grid، تأخذ الحاوية فقط المساحة التي تحتاجها اعمدتها ويمكنها الجلوس بجانب المحتوى المضمّن. عمليا، يُستخدم display: grid في الغالبية العظمى من الحالات. ستستخدم inline-grid فقط عندما تحتاج الى ان تتدفق الشبكة مع النص او العناصر المضمّنة الاخرى.

مصطلحات Grid التي يجب ان تعرفها

قبل الغوص في الخصائص، دعنا نؤسس مفردات CSS Grid. فهم هذه المصطلحات ضروري لان كل خاصية Grid ترتبط بهذه المفاهيم.

• حاوية Grid -- العنصر الذي يحمل display: grid. ينشئ سياق تنسيق الشبكة لمحتوياته.
• عنصر Grid -- ابن مباشر لحاوية grid. كل عنصر grid يوضع في الشبكة اما تلقائيا او صراحة.
• خط Grid -- الخطوط الفاصلة التي تشكل هيكل الشبكة. يمكن ان تكون افقية (خطوط صفوف) او عمودية (خطوط اعمدة). الخطوط مرقمة بدءا من 1. شبكة ذات 3 اعمدة لديها 4 خطوط اعمدة (1، 2، 3، 4).
• مسار Grid -- المساحة بين خطي grid متجاورين. المسار هو اساسا عمود او صف. شبكة ذات 3 اعمدة لديها 3 مسارات اعمدة.
• خلية Grid -- المساحة بين خطي صف متجاورين وخطي عمود متجاورين. هي اصغر وحدة في الشبكة، مثل خلية الجدول. شبكة ذات 3 اعمدة وصفين لديها 6 خلايا.
• منطقة Grid -- مساحة مستطيلة مكونة من خلية grid واحدة او اكثر. يمكن للمنطقة ان تمتد عبر مسارات متعددة افقيا وعموديا.
• فجوة Grid (مزراب) -- التباعد بين مسارات grid. الفجوات تظهر فقط بين المسارات، وليس على الحواف الخارجية للشبكة.
• الشبكة الصريحة -- الشبكة التي تحددها باستخدام grid-template-columns وgrid-template-rows.
• الشبكة الضمنية -- مسارات اضافية ينشئها المتصفح تلقائيا عندما توضع العناصر خارج حدود الشبكة الصريحة.

/*
    خطوط الاعمدة:  1     2     3     4
                   |     |     |     |
    خط الصف 1 --- +-----+-----+-----+
                   |خلية |خلية |خلية |  <-- مسار الصف 1
    خط الصف 2 --- +-----+-----+-----+
                   |خلية |خلية |خلية |  <-- مسار الصف 2
    خط الصف 3 --- +-----+-----+-----+
                   ^           ^
                   |           |
              مسار         مسار
              العمود 1     العمود 2
*/

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px; /* 3 مسارات اعمدة */
    grid-template-rows: 100px 100px;           /* مسارا صفوف */
    /* هذا ينشئ: 4 خطوط اعمدة، 3 خطوط صفوف، 6 خلايا */
}

تعريف مسارات الاعمدة: grid-template-columns

خاصية grid-template-columns تحدد عدد وحجم مسارات الاعمدة في الشبكة الصريحة. كل قيمة تقدمها تنشئ مسار عمود واحد. يمكنك استخدام اي وحدة طول CSS (px، em، rem، %)، ووحدة fr الجديدة، او دوال التحجيم مثل minmax() وrepeat().

/* ثلاثة اعمدة ثابتة العرض */
.grid {
    display: grid;
    grid-template-columns: 200px 300px 200px;
}

/* ثلاثة اعمدة بالنسبة المئوية */
.grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
}

/* وحدات مختلطة */
.grid {
    display: grid;
    grid-template-columns: 250px auto 250px;
    /* الاشرطة الجانبية ثابتة، الوسط يملأ المساحة المتبقية */
}

/* استخدام وحدات rem */
.grid {
    display: grid;
    grid-template-columns: 15rem 1fr 15rem;
}

تعريف مسارات الصفوف: grid-template-rows

خاصية grid-template-rows تعمل تماما مثل grid-template-columns لكنها تحدد مسارات الصفوف بدلا من ذلك. كل قيمة تنشئ مسار صف واحد. اذا كان لديك عناصر اكثر مما يمكن للصفوف الصريحة استيعابه، ينشئ المتصفح صفوفا ضمنية تلقائيا.

/* ثلاثة صفوف صريحة */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px auto 60px;
    /* صف الرأس: 80 بكسل، صف المحتوى: تلقائي، صف التذييل: 60 بكسل */
}

/* صفان بارتفاعات مختلفة */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 300px;
}

/* ارتفاعات الصفوف باستخدام min-content و max-content */
.grid {
    display: grid;
    grid-template-rows: min-content auto min-content;
    /* الصف الاول والاخير يتحجمان حسب محتواهما */
    /* الصف الاوسط يأخذ المساحة المتبقية */
}

وحدة fr: الجزء النسبي من المساحة المتبقية

وحدة fr فريدة لـ CSS Grid وتعني جزء. تمثل جزءا من المساحة المتاحة في حاوية grid بعد حساب جميع المسارات ذات الحجم الثابت والفجوات. وحدة fr هي اهم اداة تحجيم في Grid لانها تتيح لك انشاء تخطيطات مرنة ونسبية دون حساب النسب المئوية يدويا.

/* اثلاث متساوية */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* كل عمود يحصل على ثلث المساحة المتاحة */
}

/* اعمدة نسبية */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* المجموع: 4fr. الاعمدة هي 25%، 50%، 25% من المساحة */
}

/* خلط fr مع احجام ثابتة */
.grid {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    /* الاشرطة الجانبية 250 بكسل لكل منها */
    /* الوسط يحصل على كل المساحة المتبقية */
    /* اذا كانت الحاوية 1000 بكسل: الوسط = 1000 - 250 - 250 = 500 بكسل */
}

/* خلط fr مع النسب المئوية */
.grid {
    display: grid;
    grid-template-columns: 20% 1fr 1fr;
    /* العمود الاول 20% من الحاوية */
    /* النسبة المتبقية 80% تُقسم بالتساوي بين عمودي 1fr */
}

كيف تتفاعل fr مع المحتوى

بشكل افتراضي، مسار fr لن ينكمش اصغر من حجم min-content الخاص به. هذا يعني اذا كانت خلية grid تحتوي على كلمة طويلة او عنصر ثابت العرض، سيتوسع مسار fr ليلائمه، مما قد يجعل النسب غير متساوية. لتجاوز هذا السلوك، يمكنك استخدام minmax(0, 1fr) بدلا من 1fr العادية.

/* السلوك الافتراضي: fr تحترم min-content */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* اذا كانت خلية واحدة تحتوي على صورة بعرض 400 بكسل، سيكون ذلك العمود
       على الاقل 400 بكسل */
    /* الاعمدة الاخرى تتشارك اي مساحة متبقية */
}

/* تجاوز: السماح لاعمدة fr بالانكماش اقل من حجم المحتوى */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    /* الان جميع الاعمدة متساوية حقا، المحتوى قد يطفح */
}

دالة repeat()

دالة repeat() هي اختصار يتيح لك تعريف مسارات متعددة بنفس الاحجام او الانماط دون كتابتها فرديا. تأخذ وسيطتين: عدد التكرارات وحجم المسار (او نمط الاحجام) للتكرار.

/* بدلا من كتابة: */
.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* يمكنك كتابة: */
.grid {
    grid-template-columns: repeat(6, 1fr);
}

/* تكرار حجم ثابت */
.grid {
    grid-template-columns: repeat(4, 200px);
    /* ينشئ: 200px 200px 200px 200px */
}

/* تكرار نمط */
.grid {
    grid-template-columns: repeat(3, 1fr 2fr);
    /* ينشئ: 1fr 2fr 1fr 2fr 1fr 2fr (6 اعمدة) */
}

/* خلط repeat() مع قيم اخرى */
.grid {
    grid-template-columns: 250px repeat(3, 1fr) 250px;
    /* ينشئ: 250px 1fr 1fr 1fr 250px */
}

/* استخدام repeat() للصفوف ايضا */
.grid {
    grid-template-rows: repeat(4, 100px);
    /* ينشئ 4 صفوف، كل منها بارتفاع 100 بكسل */
}

دالة minmax()

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

/* اعمدة على الاقل 200 بكسل لكن يمكنها النمو */
.grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
}

/* صفوف بارتفاع ادنى */
.grid {
    display: grid;
    grid-template-rows: minmax(100px, auto);
    /* الصف على الاقل 100 بكسل، لكنه ينمو ليلائم المحتوى */
}

/* الجمع مع repeat() */
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    /* ثلاثة اعمدة، كل منها على الاقل 250 بكسل، تتشارك المساحة بالتساوي */
}

/* حد ادنى ثابت، حد اقصى مرن */
.grid {
    display: grid;
    grid-template-columns: minmax(300px, 500px) 1fr;
    /* العمود الاول: على الاقل 300 بكسل، على الاكثر 500 بكسل */
    /* العمود الثاني: يأخذ كل المساحة المتبقية */
}

/* حد ادنى حسب المحتوى */
.grid {
    display: grid;
    grid-template-columns: minmax(min-content, 300px) 1fr;
    /* العمود الاول: على الاقل بعرض محتواه، الحد الاقصى 300 بكسل */
}

auto-fill مقابل auto-fit

الكلمتان المفتاحيتان auto-fill وauto-fit تُستخدمان داخل repeat() بدلا من عدد تكرار ثابت. تخبران المتصفح بانشاء اكبر عدد ممكن من المسارات التي تتسع في الحاوية. الفرق بينهما يظهر عندما يكون هناك عناصر اقل من المسارات.

/* auto-fill: ينشئ اكبر عدد ممكن من اعمدة 200 بكسل */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    /* في حاوية 1000 بكسل: 5 اعمدة بعرض 200 بكسل */
    /* في حاوية 600 بكسل: 3 اعمدة بعرض 200 بكسل */
    /* المسارات الفارغة تُحفظ حتى بدون عناصر */
}

/* auto-fill مع minmax لتخطيط متجاوب */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* ينشئ اكبر عدد ممكن من الاعمدة، كل منها على الاقل 250 بكسل */
    /* الاعمدة تمتد مع 1fr لملء المساحة المتبقية */
    /* المسارات الفارغة تُحفظ (العناصر لا تمتد لملئها) */
}

/* auto-fit: نفس auto-fill لكنه يطوي المسارات الفارغة */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* ينشئ اكبر عدد ممكن من الاعمدة، كل منها على الاقل 250 بكسل */
    /* لكن المسارات الفارغة تنطوي الى 0، مما يتيح للعناصر التمدد اكثر */
}

/* الفرق: 3 عناصر في حاوية عريضة */
/* auto-fill: [عنصر][عنصر][عنصر][فارغ][فارغ] */
/* auto-fit:  [  عنصر  ][  عنصر  ][  عنصر  ]  */
/* مع auto-fit، تتوسع العناصر لملء كل المساحة المتاحة */

خصائص الفجوة: gap و row-gap و column-gap

خصائص gap تتحكم في التباعد بين مسارات grid (لكن ليس على الحواف الخارجية). كانت تُعرف سابقا بـ grid-gap وgrid-row-gap وgrid-column-gap، النسخ الحديثة بدون بادئة (gap وrow-gap وcolumn-gap) تعمل في كل من Grid و Flexbox.

/* نفس الفجوة للصفوف والاعمدة */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* 20 بكسل بين جميع الصفوف وجميع الاعمدة */
}

/* فجوات مختلفة للصفوف والاعمدة */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 15px;
    /* 30 بكسل بين الصفوف، 15 بكسل بين الاعمدة */
}

/* اختصار: row-gap ثم column-gap */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 15px;
    /* القيمة الاولى هي row-gap، الثانية هي column-gap */
}

/* استخدام وحدات نسبية لفجوات متجاوبة */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    /* الفجوة تتناسب مع عرض نافذة العرض */
}

/* فجوات بالنسبة المئوية (نسبة الى حجم حاوية grid) */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
}

الشبكة الضمنية مقابل الصريحة

الشبكة الصريحة هي الشبكة التي تحددها بـ grid-template-columns وgrid-template-rows. الشبكة الضمنية تتكون من اي مسارات اضافية ينشئها المتصفح تلقائيا لاستيعاب العناصر الموضوعة خارج حدود الشبكة الصريحة، او عندما يكون هناك عناصر اكثر مما يمكن للشبكة الصريحة استيعابه.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 اعمدة صريحة */
    grid-template-rows: 100px 100px;      /* صفان صريحان */
}

/* اذا كان لديك 9 عناصر:
   العناصر 1-6 تذهب الى الشبكة الصريحة 3×2
   العناصر 7-9 تحتاج صفا ثالثا -- هذا ضمني
   ارتفاع الصف الضمني يكون افتراضيا auto (يلائم المحتوى) */

التحكم في المسارات الضمنية: grid-auto-rows و grid-auto-columns

بشكل افتراضي، المسارات الضمنية تتحجم الى auto، مما يعني انها تنمو فقط بارتفاع او عرض محتواها. يمكنك التحكم في حجم المسارات الضمنية باستخدام grid-auto-rows وgrid-auto-columns.

/* تعيين ارتفاع ثابت لجميع الصفوف الضمنية */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px;  /* صف صريح واحد فقط */
    grid-auto-rows: 150px;      /* جميع الصفوف الاضافية ايضا 150 بكسل */
}

/* استخدام minmax لصفوف ضمنية مرنة */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    /* الصفوف الضمنية على الاقل 100 بكسل، تنمو مع المحتوى */
}

/* قيم متعددة تنشئ نمطا متكررا */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px 200px;
    /* الصفوف الضمنية تتناوب: 100 بكسل، 200 بكسل، 100 بكسل، 200 بكسل... */
}

/* التحكم في الاعمدة الضمنية */
.grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-columns: 200px;
    /* اذا وُضعت عناصر خارج الاعمدة المحددة، تظهر اعمدة جديدة بعرض 200 بكسل */
}

grid-auto-flow: التحكم في اتجاه وضع العناصر

خاصية grid-auto-flow تتحكم في كيفية ادراج العناصر الموضوعة تلقائيا في الشبكة. بشكل افتراضي، تملأ العناصر صفا بصف (من اليسار الى اليمين، من الاعلى الى الاسفل). يمكنك تغيير هذا الى عمودا بعمود، ويمكنك ايضا تفعيل خوارزمية التعبئة الكثيفة التي تملأ الفجوات التي تتركها العناصر الاكبر.

/* الافتراضي: العناصر تتدفق صفا بصف */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    /* العناصر: 1 2 3
                4 5 6
                7 8 9 */
}

/* العناصر تتدفق عمودا بعمود */
.grid {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: column;
    /* العناصر: 1 4 7
                2 5 8
                3 6 9 */
}

/* التعبئة الكثيفة: تملأ الفجوات التي تتركها العناصر الاكبر */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row dense;
    /* اذا كان العنصر 2 يمتد 3 اعمدة وينشئ فجوة،
       ستملأ العناصر الاصغر تلك الفجوة */
}

/* التعبئة الكثيفة على اساس الاعمدة */
.grid {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: column dense;
}

خطوط Grid المسماة

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

/* تسمية خطوط الاعمدة */
.grid {
    display: grid;
    grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
    grid-template-rows: [header-start] 80px [header-end body-start] 1fr [body-end footer-start] 60px [footer-end];
}

/* يمكن ان يحمل الخط اسماء متعددة */
/* [sidebar-end content-start] -- هذا الخط الواحد له اسمان */

/* استخدام الخطوط المسماة للوضع (يُغطى في الدرس التالي) */
.header {
    grid-column: sidebar-start / content-end;
    grid-row: header-start / header-end;
}

.sidebar {
    grid-column: sidebar-start / sidebar-end;
    grid-row: body-start / body-end;
}

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

/* خطوط مسماة داخل repeat() */
.grid {
    display: grid;
    grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
    /* ينشئ: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end] */
    /* يُشار الى الخطوط كـ col-start 1، col-start 2، col-start 3 */
}

/* استخدام عملي: شبكة 12 عمودا بخطوط مسماة */
.grid {
    display: grid;
    grid-template-columns: repeat(12, [col] 1fr);
    gap: 20px;
}

اختصار grid-template

اختصار grid-template يجمع grid-template-rows وgrid-template-columns وgrid-template-areas في تصريح واحد. هناك عدة اشكال للصيغة.

/* الصيغة: الصفوف / الاعمدة */
.grid {
    display: grid;
    grid-template: 80px 1fr 60px / 250px 1fr;
    /* الصفوف: 80 بكسل، 1fr، 60 بكسل */
    /* الاعمدة: 250 بكسل، 1fr */
}

/* الشكل المطول المكافئ: */
.grid {
    display: grid;
    grid-template-rows: 80px 1fr 60px;
    grid-template-columns: 250px 1fr;
}

/* مع مناطق مسماة (تخطيط ASCII): */
.grid {
    display: grid;
    grid-template:
        "header header"  80px
        "sidebar content" 1fr
        "footer footer"  60px
        / 250px 1fr;
    /* كل سلسلة مقتبسة تحدد صفا من المناطق المسماة */
    /* القيمة بعد السلسلة هي ارتفاع الصف */
    /* الخط المائل يفصل الصفوف عن تعريفات الاعمدة */
}

.grid {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar content aside"
        "footer  footer  footer";
    grid-template-columns: 200px 1fr 180px;
    grid-template-rows: 80px 1fr 60px;
    gap: 10px;
}

/* وضع العناصر حسب اسم المنطقة */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* استخدم نقطة (.) للخلايا الفارغة */
.grid {
    grid-template-areas:
        "header header header"
        ".      content aside"
        "footer footer  footer";
}

اختصار grid

اختصار grid هو اشمل اختصار لـ Grid. يمكنه تعيين كل مما يلي في تصريح واحد: grid-template-rows وgrid-template-columns وgrid-template-areas وgrid-auto-rows وgrid-auto-columns وgrid-auto-flow. لكن لانه يعيد تعيين جميع خصائص grid (بما في ذلك خصائص الشبكة الضمنية)، يفضل كثير من المطورين استخدام اختصار grid-template الاكثر تحديدا او الخصائص الفردية للوضوح.

/* شبكة صريحة: نفس grid-template */
.grid {
    display: grid;
    grid: 80px 1fr 60px / 250px 1fr;
    /* grid-template-rows: 80px 1fr 60px */
    /* grid-template-columns: 250px 1fr */
}

/* تدفق تلقائي للصفوف مع حجم صف ضمني */
.grid {
    display: grid;
    grid: auto-flow 150px / repeat(3, 1fr);
    /* grid-auto-flow: row */
    /* grid-auto-rows: 150px */
    /* grid-template-columns: repeat(3, 1fr) */
}

/* تدفق تلقائي للاعمدة مع حجم عمود ضمني */
.grid {
    display: grid;
    grid: repeat(3, 100px) / auto-flow 200px;
    /* grid-template-rows: repeat(3, 100px) */
    /* grid-auto-flow: column */
    /* grid-auto-columns: 200px */
}

/* التعبئة الكثيفة */
.grid {
    display: grid;
    grid: auto-flow dense 100px / repeat(4, 1fr);
    /* grid-auto-flow: row dense */
    /* grid-auto-rows: 100px */
    /* grid-template-columns: repeat(4, 1fr) */
}

مثال عملي: شبكة بطاقات متجاوبة

لنبنِ شبكة بطاقات متجاوبة تتكيف مع اي حجم شاشة بدون استعلامات وسائط. هذا واحد من اكثر انماط Grid شيوعا وقوة.

<div class="card-grid">
    <div class="card">بطاقة 1</div>
    <div class="card">بطاقة 2</div>
    <div class="card">بطاقة 3</div>
    <div class="card">بطاقة 4</div>
    <div class="card">بطاقة 5</div>
    <div class="card">بطاقة 6</div>
</div>

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: minmax(200px, auto);
    gap: 24px;
    padding: 24px;
}

.card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* كيف يعمل:
   - repeat(auto-fit, minmax(280px, 1fr)) ينشئ اعمدة متجاوبة
   - على الشاشات العريضة: 4+ اعمدة
   - على الاجهزة اللوحية: 2-3 اعمدة
   - على الهواتف: عمود واحد
   - بدون استعلامات وسائط!
   - grid-auto-rows: minmax(200px, auto) يضمن ارتفاعا ادنى للبطاقة
   - gap: 24px يوفر تباعدا متسقا بين جميع البطاقات */

مثال عملي: تخطيط صفحة كاملة

اليك تخطيط صفحة كاملة باستخدام grid-template-areas للوضوح وقابلية الصيانة.

<div class="page-layout">
    <header class="page-header">الرأس</header>
    <nav class="page-nav">التنقل</nav>
    <main class="page-main">المحتوى الرئيسي</main>
    <aside class="page-sidebar">الشريط الجانبي</aside>
    <footer class="page-footer">التذييل</footer>
</div>

.page-layout {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "nav     main    sidebar"
        "footer  footer  footer";
    grid-template-columns: 200px 1fr 250px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
}

.page-header  { grid-area: header; padding: 20px; background: var(--primary); color: white; }
.page-nav     { grid-area: nav; padding: 20px; background: var(--bg-light); }
.page-main    { grid-area: main; padding: 20px; }
.page-sidebar { grid-area: sidebar; padding: 20px; background: var(--bg-light); }
.page-footer  { grid-area: footer; padding: 20px; background: var(--text-dark); color: white; }

/* متجاوب: تكديس كل شيء على الهاتف */
@media (max-width: 768px) {
    .page-layout {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
}

مثال عملي: شبكة لوحة القيادة

لوحات القيادة غالبا لديها تخطيطات معقدة مع لوحات بأحجام متنوعة. Grid يجعل هذا مباشرا.

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 16px;
    padding: 16px;
}

/* بطاقات الاحصائيات عبر الاعلى */
.stat-card {
    background: var(--bg-white);
    border-radius: 8px;
    padding: 20px;
}

/* الرسم البياني الرئيسي يمتد 3 اعمدة وصفين */
.main-chart {
    grid-column: span 3;
    grid-row: span 2;
    background: var(--bg-white);
    border-radius: 8px;
    padding: 20px;
}

/* اللوحة الجانبية تمتد صفين */
.side-panel {
    grid-row: span 2;
    background: var(--bg-white);
    border-radius: 8px;
    padding: 20px;
}

/* جدول بعرض كامل في الاسفل */
.data-table {
    grid-column: 1 / -1;  /* يمتد عبر جميع الاعمدة */
    background: var(--bg-white);
    border-radius: 8px;
    padding: 20px;
}

المحاذاة على حاوية Grid

يوفر Grid خصائص محاذاة على الحاوية تتحكم في كيفية توزيع مسارات الشبكة بأكملها داخل الحاوية، وكيفية محاذاة العناصر داخل خلاياها. هذه هي خصائص المحاذاة على مستوى الحاوية.

/* justify-content: يحاذي مسارات الشبكة على المحور المضمّن (الصف) */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* اعمدة ثابتة الحجم */
    justify-content: center;    /* يوسط جميع مسارات الاعمدة */
    /* قيم اخرى: start, end, space-between, space-around, space-evenly */
}

/* align-content: يحاذي مسارات الشبكة على المحور الكتلي (العمود) */
.grid {
    display: grid;
    height: 600px;
    grid-template-rows: 100px 100px 100px; /* صفوف ثابتة الحجم */
    align-content: center;     /* يوسط جميع مسارات الصفوف عموديا */
}

/* justify-items: يحاذي عناصر grid داخل خلاياها افقيا */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;     /* يوسط جميع العناصر في خلاياها */
    /* قيم اخرى: start, end, stretch (الافتراضي) */
}

/* align-items: يحاذي عناصر grid داخل خلاياها عموديا */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    align-items: center;       /* يوسط العناصر عموديا في خلاياها */
}

/* اختصار place-items: align-items / justify-items */
.grid {
    display: grid;
    place-items: center;       /* يوسط العناصر في كلا الاتجاهين في خلاياها */
}

/* اختصار place-content: align-content / justify-content */
.grid {
    display: grid;
    place-content: center;     /* يوسط الشبكة بأكملها في الحاوية */
}

ملخص انماط حاوية Grid الشائعة

اليك مرجع سريع لاكثر انماط حاوية grid فائدة التي ستستخدمها بانتظام.

/* 1. شبكة بطاقات متجاوبة (بدون استعلامات وسائط) */
.cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* 2. تخطيط الكأس المقدسة */
.page { grid-template: auto 1fr auto / 200px 1fr 200px; }

/* 3. اطار 12 عمودا */
.framework { grid-template-columns: repeat(12, 1fr); gap: 20px; }

/* 4. تخطيط شريط جانبي */
.sidebar-layout { grid-template-columns: 300px 1fr; }

/* 5. صفوف متساوية الارتفاع */
.equal-rows { grid-auto-rows: 1fr; }

/* 6. شبه ماسونري (التعبئة الكثيفة) */
.masonry { grid-auto-flow: dense; grid-template-columns: repeat(3, 1fr); }

/* 7. محتوى متوسط */
.centered { display: grid; place-items: center; min-height: 100vh; }

/* 8. تخطيط كامل النزيف */
.full-bleed {
    grid-template-columns: 1fr min(65ch, 100%) 1fr;
    /* العمود الاوسط بعرض قابل للقراءة، الجوانب هوامش */
}