وضع عناصر Grid: الخطوط والامتدادات والمناطق

مقدمة في وضع عناصر Grid

في الدرس السابق، تعلمت كيفية اعداد حاوية grid عن طريق تحديد المسارات والفجوات والقوالب. الان حان الوقت للتحكم في مكان وضع العناصر الفردية داخل تلك الشبكة. بشكل افتراضي، يتم وضع عناصر grid تلقائيا في الخلية المتاحة التالية، متدفقة صفا بصف او عمودا بعمود حسب grid-auto-flow. لكن القوة الحقيقية لـ CSS Grid تأتي من الوضع الصريح -- اخبار كل عنصر بالضبط اي خطوط grid يجب ان يبدأ وينتهي عندها، وكم عدد المسارات التي يجب ان يمتد عبرها، واي منطقة مسماة ينتمي اليها.

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

في هذا الدرس، ستتقن كل خاصية وضع عنصر grid: grid-column-start وgrid-column-end وgrid-row-start وgrid-row-end واختصاراتها grid-column وgrid-row وgrid-area. ستتعلم كيفية استخدام ارقام الخطوط (الموجبة والسالبة)، وكلمة span المفتاحية، والخطوط المسماة، والمناطق المسماة، والعناصر المتراكبة، ومحاذاة العناصر الفردية مع justify-self وalign-self وplace-self. سنبني ايضا تخطيطات عملية تشمل صفحات بأسلوب المجلات وشبكات غير متماثلة.

فهم ارقام خطوط Grid

كل شبكة لديها خطوط مرقمة. ترقيم خطوط Grid يبدأ من 1 (وليس 0) ويزداد من اليسار الى اليمين لخطوط الاعمدة ومن الاعلى الى الاسفل لخطوط الصفوف. شبكة ذات 3 اعمدة لديها 4 خطوط اعمدة (1، 2، 3، 4). شبكة ذات 4 صفوف لديها 5 خطوط صفوف (1، 2، 3، 4، 5). ارقام الخطوط هذه هي الطريقة الاساسية لاخبار العنصر اين يجلس في الشبكة.

/*
    خطوط الاعمدة:  1       2       3       4
                   |       |       |       |
    خط الصف 1 --- +-------+-------+-------+
                   | (1,1) | (1,2) | (1,3) |
    خط الصف 2 --- +-------+-------+-------+
                   | (2,1) | (2,2) | (2,3) |
    خط الصف 3 --- +-------+-------+-------+
                   | (3,1) | (3,2) | (3,3) |
    خط الصف 4 --- +-------+-------+-------+

    الخط 1 = حافة بداية المسار الاول
    الخط 4 (عمود) = حافة نهاية مسار العمود الاخير
    الخط 4 (صف) = حافة نهاية مسار الصف الاخير
*/

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px 100px;
}

grid-column-start و grid-column-end

خاصية grid-column-start تحدد اي خط عمود يبدأ عنده العنصر، وgrid-column-end تحدد اي خط عمود ينتهي عنده. يشغل العنصر جميع مسارات الاعمدة بين هذين الخطين. اذا حددت grid-column-start فقط بدون نهاية، يمتد العنصر مسارا واحدا بالضبط بشكل افتراضي.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* العنصر يبدأ عند خط العمود 1، ينتهي عند خط العمود 3 (يمتد عمودين) */
.item-a {
    grid-column-start: 1;
    grid-column-end: 3;
}

/* العنصر يبدأ عند خط العمود 2، ينتهي عند خط العمود 5 (يمتد 3 اعمدة) */
.item-b {
    grid-column-start: 2;
    grid-column-end: 5;
}

/* العنصر في عمود محدد واحد (العمود 3) */
.item-c {
    grid-column-start: 3;
    grid-column-end: 4;
    /* او ببساطة: grid-column-start: 3; (الافتراضي يمتد مسارا واحدا) */
}

grid-row-start و grid-row-end

خاصيتا grid-row-start وgrid-row-end تعملان بشكل مطابق لنظيرتيهما في الاعمدة لكنهما تتحكمان في الوضع العمودي. تحددان اي خطوط صف يبدأ وينتهي عندها العنصر.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 80px);
    gap: 10px;
}

/* العنصر يمتد من الصف 1 الى 3 (صفان) */
.sidebar {
    grid-row-start: 1;
    grid-row-end: 3;
}

/* العنصر يمتد من الصف 2 الى 5 (ثلاثة صفوف) */
.tall-item {
    grid-row-start: 2;
    grid-row-end: 5;
}

/* دمج وضع الصفوف والاعمدة */
.featured {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    /* هذا العنصر يشغل منطقة 2×2 في الزاوية العلوية اليسرى */
}

اختصارات grid-column و grid-row

كتابة خصائص البداية والنهاية منفصلة امر مطوّل. اختصار grid-column يجمع grid-column-start وgrid-column-end بفاصل خط مائل. اختصار grid-row يفعل الشيء نفسه للصفوف. الصيغة هي: خط-البداية / خط-النهاية.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* يمتد الاعمدة 1-3، الصف 1 فقط */
.header {
    grid-column: 1 / 4;  /* يبدأ عند الخط 1، ينتهي عند الخط 4 */
    grid-row: 1 / 2;     /* يبدأ عند الخط 1، ينتهي عند الخط 2 */
}

/* يمتد العمود 1، الصفوف 2-4 */
.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

/* يمتد الاعمدة 2-4، الصفوف 2-3 */
.content {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
}

/* خلية واحدة: العمود 2، الصف 3 */
.widget {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

كلمة span المفتاحية

بدلا من تحديد ارقام خطوط البداية والنهاية بالضبط، يمكنك استخدام كلمة span المفتاحية لاخبار العنصر بعدد المسارات التي يمتد عبرها. هذا غالبا اكثر بديهية وقابلية للصيانة من حساب ارقام الخطوط، خاصة في التخطيطات المتجاوبة. يمكن استخدام كلمة span المفتاحية مع قيمة البداية او النهاية.

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;
}

/* يمتد 3 اعمدة بدءا من موضع الوضع التلقائي */
.wide-item {
    grid-column: span 3;
    /* يعادل: grid-column-end: span 3; */
    /* العنصر يبدأ اينما يضعه الوضع التلقائي، يمتد 3 اعمدة */
}

/* يبدأ عند العمود 2، يمتد 4 اعمدة (ينتهي عند الخط 6) */
.specific-span {
    grid-column: 2 / span 4;
    /* يبدأ عند الخط 2، يمتد 4 مسارات، ينتهي عند الخط 6 */
}

/* يمتد صفين */
.tall-item {
    grid-row: span 2;
}

/* يبدأ عند خط محدد، يمتد للخلف */
.backward-span {
    grid-column: span 2 / 5;
    /* ينتهي عند الخط 5، يمتد عمودين للخلف، يبدأ عند الخط 3 */
}

/* يمتد في كلا الاتجاهين */
.large-item {
    grid-column: span 2;
    grid-row: span 2;
    /* ينشئ كتلة 2×2 اينما يضعها الوضع التلقائي */
}

/* عنصر بعرض كامل يمتد عبر جميع الاعمدة */
.full-width {
    grid-column: 1 / -1;  /* الخط 1 الى الخط الاخير */
    /* او: grid-column: span 6; اذا كنت تعرف ان هناك 6 اعمدة */
}

ارقام الخطوط السالبة

ارقام خطوط Grid يمكن ان تكون سالبة ايضا، تُعد من نهاية الشبكة الصريحة. الخط الاخير هو -1، والخط قبل الاخير هو -2، وهكذا. ارقام الخطوط السالبة مفيدة للغاية للامتداد الى حافة الشبكة دون معرفة العدد الدقيق للمسارات.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* امتداد العرض الكامل: الخط 1 الى الخط الاخير */
.full-width {
    grid-column: 1 / -1;
    /* -1 هو خط العمود الاخير (الخط 5 في شبكة ذات 4 اعمدة) */
}

/* اخر عمودين */
.last-two {
    grid-column: -3 / -1;
    /* من الخط الثالث من الاخير الى الخط الاخير = اخر عمودين */
}

/* العمود الاخير فقط */
.last-column {
    grid-column: -2 / -1;
}

/* الارتفاع الكامل: اول خط صف الى اخر خط صف */
.full-height {
    grid-row: 1 / -1;
}

/* خلية الزاوية السفلية اليمنى */
.corner {
    grid-column: -2 / -1;
    grid-row: -2 / -1;
}

/* كل شيء عدا العمود الاول */
.skip-first {
    grid-column: 2 / -1;
}

اختصار grid-area

خاصية grid-area هي الاختصار النهائي لوضع عنصر grid. يمكن استخدامها بطريقتين مختلفتين: كاختصار يعتمد على الخطوط يجمع جميع قيم الوضع الاربع، او كمرجع لمنطقة مسماة محددة في grid-template-areas.

grid-area المعتمد على الخطوط

عند استخدام ارقام الخطوط، يأخذ grid-area اربع قيم مفصولة بخطوط مائلة بهذا الترتيب: بداية-الصف / بداية-العمود / نهاية-الصف / نهاية-العمود. لاحظ الترتيب: يذهب بداية-الصف، بداية-العمود، نهاية-الصف، نهاية-العمود (وليس زوج الصف ثم زوج العمود كما قد تتوقع).

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* grid-area: بداية-الصف / بداية-العمود / نهاية-الصف / نهاية-العمود */

/* كتلة 2×2 في اعلى اليسار */
.item-a {
    grid-area: 1 / 1 / 3 / 3;
    /* بداية-الصف: 1، بداية-العمود: 1، نهاية-الصف: 3، نهاية-العمود: 3 */
}

/* رأس بعرض كامل */
.header {
    grid-area: 1 / 1 / 2 / -1;
    /* الصف 1، يمتد عبر جميع الاعمدة */
}

/* استخدام span في grid-area */
.item-b {
    grid-area: 2 / 2 / span 2 / span 3;
    /* يبدأ عند الصف 2، العمود 2، يمتد صفين و3 اعمدة */
}

/* الزاوية السفلية اليمنى */
.item-c {
    grid-area: -2 / -2 / -1 / -1;
    /* الصف الاخير، العمود الاخير */
}

grid-area بالمناطق المسماة

عندما تستخدم حاوية grid خاصية grid-template-areas، يمكنك وضع العناصر ببساطة عن طريق الاشارة الى اسم المنطقة بـ grid-area. هذا هو النهج الاكثر قابلية للقراءة والصيانة لتخطيطات مستوى الصفحة.

.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;
    min-height: 100vh;
}

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

/* سلسلة grid-template-areas تنشئ خطوطا مسماة ضمنية:
   منطقة "header" تنشئ خطوطا باسم header-start و header-end
   هذا يعني يمكنك ايضا الاشارة اليها كخطوط:
   grid-column: header-start / header-end; */

تراكب عناصر Grid

على عكس Flexbox، يسمح CSS Grid بتراكب العناصر عن طريق وضعها في نفس الخلايا. عندما تتراكب العناصر، تتكدس وفقا لترتيبها في المصدر بشكل افتراضي، مع العناصر اللاحقة في الاعلى. يمكنك التحكم في ترتيب التكديس بخاصية z-index، التي تعمل على عناصر grid بدون الحاجة لـ position: relative.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 150px);
    gap: 0;
}

/* صورة الخلفية تمتد عبر الشبكة بأكملها */
.background-image {
    grid-area: 1 / 1 / -1 / -1;
    z-index: 1;
}

/* طبقة نص فوق الصورة */
.text-overlay {
    grid-area: 2 / 2 / 3 / 4;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* شارة في الزاوية */
.badge {
    grid-area: 1 / -2 / 2 / -1;
    z-index: 3;
    background: var(--primary);
    color: white;
    padding: 10px;
    text-align: center;
}

.overlap-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 80px);
    gap: 0;
}

.card-1 {
    grid-area: 1 / 1 / 3 / 4;
    z-index: 1;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-2 {
    grid-area: 2 / 3 / 4 / 6;
    z-index: 2;
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-3 {
    grid-area: 3 / 2 / 5 / 5;
    z-index: 3;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

محاذاة العناصر الفردية: justify-self و align-self

بشكل افتراضي، تمتد عناصر grid لملء منطقة grid بالكامل (افقيا وعموديا). خاصيتا justify-self وalign-self تتيحان لك تجاوز هذا للعناصر الفردية، متحكمة في كيفية وضع العنصر داخل خليته او منطقته.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 150px);
    gap: 10px;
}

/* الافتراضي: العنصر يمتد لملء عرض الخلية */
.item-stretch {
    justify-self: stretch;  /* القيمة الافتراضية */
}

/* المحاذاة للبداية (اليسار في LTR، اليمين في RTL) */
.item-start {
    justify-self: start;
    /* العنصر ينكمش لعرض محتواه، يجلس في يسار خليته */
}

/* المحاذاة للنهاية (اليمين في LTR، اليسار في RTL) */
.item-end {
    justify-self: end;
}

/* التوسيط افقيا داخل الخلية */
.item-center {
    justify-self: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}

/* الافتراضي: العنصر يمتد لملء ارتفاع الخلية */
.item-stretch {
    align-self: stretch;  /* القيمة الافتراضية */
}

/* المحاذاة لاعلى الخلية */
.item-top {
    align-self: start;
}

/* المحاذاة لاسفل الخلية */
.item-bottom {
    align-self: end;
}

/* التوسيط عموديا داخل الخلية */
.item-middle {
    align-self: center;
}

اختصار place-self

اختصار place-self يجمع align-self وjustify-self في تصريح واحد. الصيغة هي place-self: <align-self> <justify-self>. اذا قدمت قيمة واحدة، تُطبق على كلا المحورين.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}

/* التوسيط افقيا وعموديا */
.centered-item {
    place-self: center;
    /* يعادل: align-self: center; justify-self: center; */
}

/* الزاوية العلوية اليمنى من الخلية */
.top-right {
    place-self: start end;
    /* align-self: start (اعلى)، justify-self: end (يمين) */
}

/* الزاوية السفلية اليسرى من الخلية */
.bottom-left {
    place-self: end start;
    /* align-self: end (اسفل)، justify-self: start (يسار) */
}

/* امتداد عموديا، توسيط افقيا */
.stretch-center {
    place-self: stretch center;
}

خاصية order في Grid

تماما كما في Flexbox، خاصية order في Grid تتحكم في الترتيب المرئي للعناصر الموضوعة تلقائيا. العناصر ذات قيم order الاقل توضع اولا. القيمة الافتراضية هي 0. هذا يؤثر فقط على العناصر الموضوعة تلقائيا -- العناصر الموضوعة صراحة (تلك التي تحمل grid-column او grid-row او grid-area) تذهب دائما الى مواقعها المحددة بغض النظر عن order.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    gap: 10px;
}

/* هذه العناصر موضوعة تلقائيا، لذا order يؤثر عليها */
.item-first  { order: -1; }  /* يوضع اولا */
.item-normal { order: 0; }   /* الترتيب الافتراضي */
.item-last   { order: 1; }   /* يوضع اخيرا */

/* هذا العنصر موضوع صراحة، order يُتجاهل للوضع */
.explicit-item {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    order: 99;  /* لا يغير موضعه -- موضوع صراحة */
}

مثال عملي: تخطيط المجلة

تخطيطات المجلات تتميز بترتيبات غير متماثلة مع مقالات مميزة تمتد عبر اعمدة وصفوف متعددة، محاطة بمقالات اصغر. هذا هو المكان الذي يتألق فيه Grid حقا.

<div class="magazine">
    <article class="featured">مقال مميز</article>
    <article class="article-1">مقال 1</article>
    <article class="article-2">مقال 2</article>
    <article class="article-3">مقال 3</article>
    <article class="article-4">مقال 4</article>
    <article class="article-5">مقال 5</article>
</div>

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

/* المقال المميز: كبير، يمتد عمودين وصفين */
.featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: var(--primary);
    color: white;
    padding: 32px;
    border-radius: 12px;
    font-size: 1.5rem;
}

/* مقال 1: اعلى اليمين، خلية واحدة */
.article-1 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

/* مقال 2: يمين مقال 1، طويل */
.article-2 {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
    background: var(--bg-light);
    padding: 20px;
    border-radius: 8px;
}

/* مقال 3: تحت مقال 1 */
.article-3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

/* مقال 4 و5: صف بعرض كامل في الاسفل */
.article-4 {
    grid-column: 1 / 3;
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.article-5 {
    grid-column: 3 / -1;
    background: var(--primary-light);
    padding: 20px;
    border-radius: 8px;
}

/* متجاوب: تكديس على الهاتف */
@media (max-width: 768px) {
    .magazine {
        grid-template-columns: 1fr;
    }
    .featured,
    .article-1,
    .article-2,
    .article-3,
    .article-4,
    .article-5 {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

مثال عملي: شبكة صور غير متماثلة

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

<div class="image-grid">
    <div class="img-large"><img src="photo-1.jpg" alt="صورة كبيرة"></div>
    <div class="img-small-1"><img src="photo-2.jpg" alt="صورة صغيرة"></div>
    <div class="img-small-2"><img src="photo-3.jpg" alt="صورة صغيرة"></div>
    <div class="img-medium"><img src="photo-4.jpg" alt="صورة متوسطة"></div>
    <div class="img-tall"><img src="photo-5.jpg" alt="صورة طويلة"></div>
</div>

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 150px);
    gap: 12px;
}

.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* صورة كبيرة: اعلى اليسار، 2×2 */
.img-large {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* صورتان صغيرتان متكدستان على اليمين */
.img-small-1 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.img-small-2 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* صورة متوسطة: اسفل اليسار، عمود واحد عرضا، صفان ارتفاعا */
.img-medium {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

/* صورة طويلة: اسفل اليمين، عمودان عرضا */
.img-tall {
    grid-column: 2 / 4;
    grid-row: 3 / 5;
}

مثال عملي: جدول الاسعار مع Grid

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

<div class="pricing-grid">
    <div class="plan basic">
        <h3>الاساسي</h3>
        <p class="price">$9/شهريا</p>
        <ul>
            <li>5 مشاريع</li>
            <li>10 جيجا تخزين</li>
            <li>دعم بريد الكتروني</li>
        </ul>
        <button>اختر الاساسي</button>
    </div>
    <div class="plan pro">
        <h3>الاحترافي</h3>
        <p class="price">$29/شهريا</p>
        <ul>
            <li>مشاريع غير محدودة</li>
            <li>100 جيجا تخزين</li>
            <li>دعم ذو اولوية</li>
            <li>تحليلات متقدمة</li>
        </ul>
        <button>اختر الاحترافي</button>
    </div>
    <div class="plan enterprise">
        <h3>المؤسسي</h3>
        <p class="price">$99/شهريا</p>
        <ul>
            <li>كل شيء غير محدود</li>
            <li>1 تيرا تخزين</li>
            <li>دعم هاتفي 24/7</li>
        </ul>
        <button>اختر المؤسسي</button>
    </div>
</div>

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 40px 20px;
    align-items: start;
}

.plan {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
}

/* الخطة المميزة: مرتفعة بصريا */
.plan.pro {
    border: 2px solid var(--primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: scale(1.05);
    position: relative;
    z-index: 1;
    /* استخدام align-self لتمديدها اطول */
    align-self: stretch;
}

.plan .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 16px 0;
}

.plan button {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 24px;
}

/* متجاوب: تكديس على الهاتف */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .plan.pro {
        transform: none;
        order: -1;  /* عرض الخطة المميزة اولا على الهاتف */
    }
}

مثال عملي: معرض صور مع صور مميزة

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

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    grid-auto-flow: dense;  /* ملء الفجوات */
    gap: 8px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* صور عادية: موضوعة تلقائيا، 1×1 */
.gallery .photo {
    /* لا حاجة لوضع صريح -- موضوعة تلقائيا */
}

/* مميزة: 2×2 */
.gallery .photo.featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* عريضة: عمودان، صف واحد */
.gallery .photo.wide {
    grid-column: span 2;
}

/* طويلة: عمود واحد، صفان */
.gallery .photo.tall {
    grid-row: span 2;
}

/* مع التعبئة الكثيفة، الصور الصغيرة تملأ تلقائيا
   الفجوات التي تتركها الصور المميزة والعريضة والطويلة */

مثال عملي: تخطيط اداة لوحة القيادة

ادوات لوحة القيادة غالبا تحتاج وضعا دقيقا مع بعض الادوات اكبر من غيرها. وضع عناصر Grid يجعل هذا مباشرا للبناء والصيانة.

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

/* اداة الرأس بعرض كامل */
.widget-header {
    grid-column: 1 / -1;
}

/* ادوات الاحصائيات: 3 اعمدة لكل منها، في صف من 4 */
.widget-stat {
    grid-column: span 3;
}

/* الرسم البياني الرئيسي: 8 اعمدة عرضا، 3 صفوف طولا */
.widget-chart {
    grid-column: 1 / 9;
    grid-row: span 3;
}

/* خلاصة النشاط: 4 اعمدة، 3 صفوف */
.widget-activity {
    grid-column: 9 / -1;
    grid-row: span 3;
}

/* الجدول: عرض كامل */
.widget-table {
    grid-column: 1 / -1;
    grid-row: span 2;
}

/* ادوات معلومات صغيرة */
.widget-info {
    grid-column: span 4;
}

/* نقاط التوقف المتجاوبة */
@media (max-width: 1024px) {
    .widget-chart {
        grid-column: 1 / -1;
    }
    .widget-activity {
        grid-column: 1 / -1;
    }
    .widget-stat {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
    .widget-stat,
    .widget-chart,
    .widget-activity,
    .widget-table,
    .widget-info {
        grid-column: 1 / -1;
    }
}

الوضع بخطوط Grid المسماة

اذا حددت خطوطا مسماة على حاوية grid (كما غُطي في الدرس السابق)، يمكنك الاشارة الى تلك الاسماء عند وضع العناصر. الخطوط المسماة تجعل كود الوضع الخاص بك اكثر قابلية للقراءة.

.grid {
    display: grid;
    grid-template-columns:
        [full-start] 1fr
        [content-start] minmax(0, 800px)
        [content-end] 1fr
        [full-end];
    grid-template-rows:
        [header-start] auto
        [header-end main-start] 1fr
        [main-end footer-start] auto
        [footer-end];
    min-height: 100vh;
}

/* رأس بعرض كامل */
.header {
    grid-column: full-start / full-end;
    grid-row: header-start / header-end;
}

/* محتوى متوسط */
.main-content {
    grid-column: content-start / content-end;
    grid-row: main-start / main-end;
}

/* تذييل بعرض كامل */
.footer {
    grid-column: full-start / full-end;
    grid-row: footer-start / footer-end;
}

/* عنصر بنزيف كامل داخل منطقة المحتوى */
.full-bleed-image {
    grid-column: full-start / full-end;
    /* هذا يمتد من الحافة الى الحافة بينما المحتوى الاخر متوسط */
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, [col] 1fr);
    gap: 20px;
}

/* يمتد الاعمدة 1-8 باستخدام خط مسمى مع فهرس */
.main-content {
    grid-column: col 1 / col 9;
    /* يبدأ عند خط "col" الاول، ينتهي عند خط "col" التاسع */
    /* هذا يمتد 8 اعمدة */
}

/* يمتد الاعمدة 9-12 */
.sidebar {
    grid-column: col 9 / -1;
    /* من خط "col" التاسع الى النهاية */
}

/* عرض كامل */
.banner {
    grid-column: col 1 / -1;
}

انماط الوضع الشائعة

اليك مرجع سريع لانماط الوضع التي ستستخدمها بشكل متكرر.

/* عرض كامل (يمتد جميع الاعمدة) */
.full { grid-column: 1 / -1; }

/* اعمدة وسطية (في شبكة 12 عمودا) */
.centered-6 { grid-column: 4 / 10; }   /* 6 اعمدة متوسطة */
.centered-8 { grid-column: 3 / 11; }   /* 8 اعمدة متوسطة */

/* تقسيم ثلثان / ثلث */
.two-thirds { grid-column: span 8; }
.one-third  { grid-column: span 4; }

/* نصف ونصف */
.half { grid-column: span 6; }

/* كتلة 2×2 صريحة */
.block-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

/* تثبيت في الزاوية السفلية اليمنى */
.bottom-right {
    grid-column: -2 / -1;
    grid-row: -2 / -1;
}

/* العمود الاول، جميع الصفوف */
.first-col-full {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
}

/* الصف الاخير، جميع الاعمدة */
.last-row-full {
    grid-column: 1 / -1;
    grid-row: -2 / -1;
}

/* توسيط عنصر واحد في خليته */
.item-centered {
    place-self: center;
}

تصحيح وضع Grid

عندما لا تظهر عناصر grid حيث تتوقع، اليك الاسباب الاكثر شيوعا وكيفية اصلاحها.

/* المشكلة 1: عنصر موضوع خارج الشبكة الصريحة */
.grid {
    grid-template-columns: repeat(3, 1fr);  /* 4 خطوط اعمدة */
}
.item {
    grid-column: 5 / 7;  /* الخطوط 5-7 غير موجودة في الشبكة الصريحة */
    /* المتصفح ينشئ اعمدة ضمنية لاستيعاب هذا العنصر */
    /* الاصلاح: تأكد ان ارقام خطوطك تتطابق مع تعريف شبكتك */
}

/* المشكلة 2: تراكب العناصر بشكل غير مقصود */
.item-a { grid-column: 1 / 3; grid-row: 1 / 2; }
.item-b { grid-column: 2 / 4; grid-row: 1 / 2; }
/* كلا العنصرين يشغلان العمود 2، الصف 1 -- يتراكبان! */
/* الاصلاح: عدّل ارقام الخطوط حتى لا تتشارك العناصر نفس الخلايا */

/* المشكلة 3: ارقام الخطوط السالبة لا تعمل كما هو متوقع */
.grid {
    grid-template-columns: repeat(3, 1fr);
    /* الشبكة الصريحة لديها الخطوط 1-4 */
}
.item {
    grid-column: 1 / -1;  /* يعمل: يمتد الخطوط 1-4 (جميع 3 اعمدة) */
}
/* لكن اذا انشأت عناصر اعمدة ضمنية، -1 لا يزال يعني الخط الصريح 4 */

/* المشكلة 4: span لا يعمل مع بداية ونهاية صريحتين معا */
.item {
    grid-column: 2 / span 3;  /* يعمل: يبدأ عند 2، يمتد 3 */
    grid-column: span 2 / 5;  /* يعمل: ينتهي عند 5، يمتد 2 للخلف */
    /* grid-column: span 2 / span 3; -- غير صالح: لا يمكن الامتداد من كلا الجانبين */
}

/* نصيحة: استخدم ادوات تطوير المتصفح لتصور الشبكة */
/* Chrome وFirefox وEdge جميعها لديها مفتشات grid ممتازة */
/* تعرض ارقام الخطوط والمناطق والفجوات بصريا */

Grid مقابل Flexbox: متى تستخدم ايهما

الان بعد ان تعرف كلا من Grid و Flexbox، فهم متى تستخدم كلا منهما امر حاسم لكتابة CSS نظيف وقابل للصيانة.

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

/* Grid لتخطيط الصفحة */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* Flexbox للتنقل داخل خلية grid */
.nav-sidebar {
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
}

/* Flexbox لتخطيط البطاقة داخل خلية grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card {
    display: flex;           /* Flexbox داخل عنصر grid */
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    background: var(--bg-white);
}

.card-body {
    flex: 1;                 /* المحتوى ينمو */
}

.card-footer {
    margin-top: auto;        /* التذييل يُدفع للاسفل */
}