شبكة CSS - عاد تنسيق الجدول. التواجد هناك والتواجد بشكل مربع

سورما

الملخّص

إذا كنت على دراية بـ Flexbox، فيجب أن تبدو الشبكة مألوفة لك. تملك راشيل أندرو موقع ويب رائعًا مخصصًا لشبكة CSS لمساعدتك في البدء. تتوفّر "الشبكة" الآن في Google Chrome.

Flexbox؟ الشبكة؟

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

لا تتوفّر طريقة لمحاذاة العناصر على مستوى حاويات متعددة لإطار flexbox.

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

كانت شبكة CSS قيد التطوير، بعد وضع علامة في معظم المتصفحات لأكثر من 5 سنوات، وقد تم قضاء وقت إضافي في إمكانية التشغيل التفاعلي لتجنّب إطلاق عربات صغيرة كما حدث في Flexbox. لذلك إذا استخدمت الشبكة لتنفيذ التخطيط في Chrome، فمن المحتمل أن تحصل على نفس النتيجة في Firefox وSafari. في وقت كتابة هذا التقرير، أصبح تنفيذ Microsoft Edge لـ Grid قديمًا (كما كان متوفرًا بالفعل في IE11). والتحديث "قيد الدراسة".

على الرغم من أوجه التشابه في المفهوم وبناء الجملة، لا تفكر في Flexbox وGrid على أنها تقنيات تخطيط متنافسة. يتم ترتيب الشبكة في بُعدين، بينما يتم وضع Flexbox في بُعد واحد. يكون هناك تناغم عند استخدام الاثنين معًا.

تعريف الشبكة

للتعرف على الخصائص الفردية للشبكة، أوصيك بشدة باستخدام Grid By Example أو CSS Tricks' ورقة المعلومات المرجعية. إذا كنت على دراية بـ Flexbox، فالكثير من الخصائص ومعانيها ينبغي أن تكون مألوفة.

لنلقِ نظرة على تخطيط الشبكة القياسي المكون من 12 عمودًا. يشيع التخطيط الكلاسيكي المكون من 12 عمودًا لأن الرقم 12 قابل للقسمة على 2 و3 و4 و6، وبالتالي مفيد للعديد من التصميمات. لنقم بتنفيذ هذا التخطيط:

لا تتوفّر طريقة لمحاذاة العناصر على مستوى حاويات متعددة لإطار flexbox.

لنبدأ بشفرة الترميز:

<!DOCTYPE html>
<body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>

في ورقة الأنماط، نبدأ بتوسيع body بحيث يشمل إطار العرض بالكامل وتحويله إلى حاوية شبكة:

html, body {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
body {
    display: grid;
}

الآن نستخدم شبكة CSS. رائع!

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

مثال على التنسيق المبسّط

تجدر الإشارة إلى أنّ الرأس والتذييل متغيّران في العرض والمحتوى متغيّر في كلا البعدين. سيكون التنقل متغيّرًا في كلا البعدين أيضًا، لكننا سنفرض عليه حدًا أدنى للعرض يبلغ 200 بكسل. (لماذا؟ لعرض ميزات شبكة CSS بالطبع).

في CSS Grid (شبكة CSS)، تُعرف مجموعة الأعمدة والصفوف باسم tracks (المسارات). لنبدأ بتعريف مجموعتنا الأولى من المسارات، الصفوف:

body {
    display: grid;
    grid-template-rows: 150px auto 100px;
}

تستخدم السمة grid-template-rows سلسلة من الأحجام التي تحدِّد الصفوف الفردية. في هذه الحالة، يكون ارتفاع الصف الأول 150 بكسل والارتفاع الأخير 100 بكسل. ويتم ضبط الصف الأوسط على auto، ما يعني أنّه سيتم ضبطه على الارتفاع اللازم لاستيعاب عناصر الشبكة (العناصر الثانوية لحاوية الشبكة) في ذلك الصف. نظرًا لأن الجسم يمد عبر إطار العرض بالكامل، فإن المسار الذي يحتوي على المحتوى (الأصفر في الصورة أعلاه) سيملأ على الأقل كل المساحة المتاحة، ولكنه سيزداد (ويجعل المستند يتم تمريره) إذا كان ذلك ضروريًا.

بالنسبة للأعمدة، نريد اتباع نهج أكثر ديناميكية: نريد أن يزداد التنقل والمحتوى (وتقليصه)، لكننا نريد ألا يتقلص التنقل إلى أقل من 200 بكسل مطلقًا ونريد أن يكون المحتوى أكبر من التنقل. في Flexbox، سنستخدم تقنية flex-grow وflex-sink، لكن في الشبكة يختلف الأمر قليلاً:

body {
    display: grid;
    grid-template-rows: 150px auto 100px;
    grid-template-columns: minmax(200px, 3fr) 9fr;
}

نحدد عمودين. يتم تحديد العمود الأول باستخدام الدالة minmax()، التي تتخذ قيمتين: الحد الأدنى والحد الأقصى لحجم هذا المسار. (إنها مثل min-width وmax-width في جهاز واحد.) الحد الأدنى للعرض كما ناقشنا من قبل، 200 بكسل. الحد الأقصى للعرض هو 3fr. fr هي وحدة خاصة بالشبكة تتيح لك توزيع المساحة المتاحة على عناصر الشبكة. تشير fr على الأرجح إلى "وحدة كسر" و"وحدة حرة" قريبًا. تعني قيمنا هنا أن كلا العمودين سوف ينموان لملء الشاشة، ولكن سيظهر عمود المحتوى دائمًا 3 أضعاف عرض عمود التنقل (شرط أن يظل عمود التنقل أكبر من 200 بكسل).

على الرغم من أنّ موضع عناصر الشبكة ليس صحيحًا بعد، فإنّ حجم الصفوف والأعمدة يتصرف بشكل صحيح ويؤدي إلى السلوك الذي كنا نسعى إليه:

يؤدي وضع العناصر

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

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

header {
    grid-column: 1 / 3;
}
nav {
    grid-row: 2 / span 2;
}
إدراج الإعلانات يدويًا

نريد أن يبدأ الرأس في العمود الأول وينتهي قبل العمود الثالث. يجب أن يبدأ التنقل في الصف الثاني ويمتد إلى صفين إجمالاً.

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

body {
    display: grid;
    grid-template-rows: 150px [nav-start] auto 100px [nav-end];
    grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
    grid-column: header-start / header-end;
}
nav {
    grid-row: nav-start / nav-end;
}

سينتج عن الكود أعلاه التنسيق نفسه الذي كان عليه الكود السابق.

الأكثر قوة هي ميزة تسمية مناطق بأكملها في شبكتك:

body {
    display: grid;
    grid-template-rows: 150px auto 100px;
    grid-template-columns: minmax(200px, 3fr) 9fr;
    grid-template-areas: "header header"
                        "nav    content"
                        "nav    footer";
}
header {
    grid-area: header;
}
nav {
    grid-area: nav;
}

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

هل هناك المزيد؟

نعم، هناك الكثير من الطرق التي يجب تناولها في مشاركة مدونة واحدة. رايتشل أندرو هي خبيرة في GDE وخبيرة تمت دعوتها في مجموعة عمل CSS وكانت تعمل معهم منذ البداية للتأكّد من تبسيط الشبكة لتصميم الويب. كما أنها ألّفت كتابًا عنه. يعد موقعها على الويب Grid By Example موردًا قيمًا للتعرف على الشبكة. يعتقد الكثير من الأشخاص أن الشبكة هي خطوة ثورية لتصميم الويب وتم تفعيلها الآن افتراضيًا في Chrome لذا يمكنك البدء في استخدامها اليوم.