الملخّص
إذا كنت على دراية بـ Flexbox، فينبغي أن تبدو Grid مألوفة. لدى راشيل أندرو موقع إلكتروني رائع مخصص لـ CSS Grid لمساعدتك على البدء. تتوفّر "الشبكة" الآن في Google Chrome.
Flexbox؟ الشبكة؟
على مدار السنوات القليلة الماضية، انتشر استخدام CSS Flexbox على نطاق واسع، ويبدو أنّ التوافق مع المتصفحات جيد جدًا (إلا إذا كنت من الأشخاص الفقراء الذين يدعمون الإصدار IE9 والإصدارات الأقدم). جعلت Flexbox الكثير من مهام التخطيط المعقدة أسهل، مثل التباعد المتساوي بين العناصر، أو التخطيطات من أعلى إلى أسفل أو الكأس المقدس لسحر CSS: التوسيط الرأسي.
لكن للأسف، تحتوي الشاشات عادةً على بُعد ثانٍ نحتاج إلى القلق بشأنه. لن تتمكّن من اختيار حجم العناصر بنفسك، لكن مع الأسف، لن تتمكّن من اختيار إيقاع عمودي وأفقي معًا عند استخدام أداة flexbox وحدها. هنا يأتي دور CSS Grid لإنقاذ الآخرين.
كانت خدمة CSS Grid قيد التطوير، خلف علامة في معظم المتصفحات لأكثر من 5 سنوات، وقد تم قضاء وقت إضافي على إمكانية التشغيل التفاعلي لتجنب إطلاق عربات، مثل Flexbox. لذلك إذا استخدمت الشبكة لتطبيق التنسيق في Chrome، فمن المحتمل أن تحصل على النتيجة نفسها في Firefox وSafari. في وقت كتابة هذا التقرير، كان تطبيق Microsoft Edge لـ Grid غير محدَّث (كما هو الحال حاليًا في IE11) والتحديث هو "قيد المراجعة".
على الرغم من أوجه التشابه في المفهوم وبناء الجملة، لا تفكر في Flexbox وGrid على أنهما تقنيات تخطيط منافسة. يتم ترتيب الشبكة في بعدين، بينما يتم وضع Flexbox في منتج واحد. يكون هناك انسجام عند استخدام الاثنين معًا.
تحديد الشبكة
للتعرف على الخصائص الفردية لـ Grid، أوصي بشدة بـ Grid By Example أو CSS Tricks' ورقة المعلومات المرجعية. إذا كنت معتادًا على استخدام Flexbox، فإن الكثير من الخصائص ومعناها يجب أن تكون مألوفة.
لنلقِ نظرة على تخطيط شبكة قياسي من 12 عمودًا. يشيع التخطيط الكلاسيكي المكون من 12 عمودًا لأن الرقم 12 قابل للقسمة على 2 و3 و4 و6، وبالتالي فهو مفيد للعديد من التصميمات. لنستخدم هذا التخطيط:
لنبدأ بالرمز البرمجي الخاص بنا:
<!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. رائع!
الخطوة التالية هي تنفيذ الصفوف والأعمدة لشبكتنا. يمكننا تنفيذ جميع الأعمدة الـ 12 في نموذجنا التجريبي، ولكن نظرًا لأننا لا نستخدم كل عمود، فإن القيام بذلك قد يجعل CSS لدينا فوضويًا بشكل غير ضروري. من أجل البساطة، سنقوم بتنفيذ التخطيط بهذه الطريقة:
يكون عرض الرأس والتذييل متغيرين، كما أن المحتوى متغير في كلا البُعدين. سيكون التنقل متنوعًا في كلا البُعدين أيضًا، ولكننا سنفرض عليه حدًّا أدنى للعرض يبلغ 200 بكسل. (لماذا؟ لإظهار ميزات CSS Grid، بالطبع).
في شبكة CSS، يُطلق على مجموعة الأعمدة والصفوف اسم المسارات. لنبدأ بتحديد مجموعتنا الأولى من المسارات، الصفوف:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
تأخذ grid-template-rows سلسلة من الأحجام التي تعرّف الصفوف الفردية.
في هذه الحالة، يكون ارتفا�� الصف الأول 150 بكسل وال��ف الأخ��ر 100 بكسل.
يتم ضبط الصف الأوسط على auto، أي أنّه سيتم ضبطه على الارتفاع المطلوب ليلائم عناصر الشبكة (العناصر الثانوية في حاوية الشبكة) في هذا الصف. وبما أنّ نصّنا يمتد عبر إطار العرض بالكامل، فإنّ ��لمسار الذي يحتوي على المحتوى (الأصفر في الصورة أعلاه) سيملأ على الأقل كل المساحة المتاحة، ولكنّه سيكبر (ويؤدّي إلى تمرير المستند) إذا كان ذلك ضروريًا.
بالنسبة إلى الأعمدة التي نريد اتباع منهج أكثر ديناميكية فيها: نريد أن يزداد كل من التنقل والمحتوى (ويتقلص)، لكننا نريد ألا يقل حجم التنقل أبدًا عن 200 بكسل، ونريد أن يكون المحتوى أكبر من التنقل. في Flexbox، نستخدم flex-grow وflex-shrink، لكن في الشبكة، الأمر مختلف قليلاً:
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 تبسّط تصميم الويب. حتى أنها كتبت كتابًا عنه. ويعد موقعها الإلكتروني Grid By Example موردًا قيّمًا للتعرف على Grid. يعتقد الكثير من الأشخاص أن الشبكة تعد خطوة ثورية في تصميم الويب ويتم تفعيلها الآن بشكل افتراضي في Chrome حتى تتمكن من استخدامها اليوم.