TL;DR
إذا كنت على دراية بتنسيق Flexbox، ستشعر بالاعتياد على تنسيق Grid. تدير راشيل أندرو موقعًا إلكترونيًا رائعًا مخصّصًا لشبكة CSS لمساعدتك في البدء. تتوفّر "الشبكة" الآن في Google Chrome.
Flexbox؟ شبكة؟
خلال السنوات القليلة الماضية، أصبح CSS Flexbox مستخدمًا على نطاق واسع، ويبدو أنّ توافق المتصفّحات معه جيد جدًا (إلا إذا كنت من الأشخاص الذين عليهم استخدام IE9 والإصدارات الأقدم). جعلت Flexbox الكثير من مهام التخطيط المعقدة أسهل، مثل التباعد المتساوي بين العناصر، أو التخطيطات من أعلى إلى أسفل أو الكأس المقدس لسحر CSS: التوسيط الرأسي.
ولكن للأسف، تحتوي الشاشات عادةً على سمة ثانية يجب الانتباه إليها. لن تتمكّن من اختيار حجم العناصر بنفسك، لكن مع الأسف، لن تتمكّن من اختيار إيقاع عمودي وأفقي معًا عند استخدام أداة flexbox وحدها. وهنا تأتي شبكة CSS لإنقاذ الموقف.
تم تطوير CSS Grid، وأصبح متاحًا في معظم المتصفّحات منذ أكثر من 5 سنوات، وتم تخصيص وقت إضافي للتوافق لتجنّب إطلاقه مع أخطاء مثل Flexbox. وبالتالي، إذا كنت تستخدم Grid لتنفيذ التنسيق في 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، ما يعني أنّه سيتم ضبطه على الارتفاع المطلوب ليلائم عناصر الشبكة (الفرعية لحاوية الشبكة) في هذا الصف. بما أنّ النص ممتد على مساحة العرض بالكامل، ستملؤه المقاطع التي تحتوي على المحتوى (باللون الأصفر في الصورة أعلاه) على الأقل كل المساحة المتاحة، ولكن ستتم زيادتها (وسيتم التمرير في المستند) إذا لزم الأمر.
بالنسبة إلى الأعمدة، نريد اتّباع نهج أكثر ديناميكية: نريد أن يكبر كلّ من nav و المحتوى (ويتقلّص)، ولكن لا نريد أن يتقلّص nav إلى أقل من 200 بكسل ونريد أن يكون المحتوى أكبر من nav. في Flexbox، نستخدم flex-grow و flex-shrink، ولكنّ الأمر مختلف قليلاً في Grid:
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 إلى "وحدة الكسور"، ولكنها قد تعني أيضًا وحدة حرة قريبًا.
تعني قيمنا هنا أنّ كلا العمودَين سيزدادان ليملؤا الشاشة، ولكن عمود
المحتوى سيكون دائمًا أعرض بثلاث مرات من عمود nav (شرط أن يظل عمود
nav أعرض من 200 بكسل).
على الرغم من أنّ موضع عناصر الشبكة غير صحيح بعد، فإنّ حجم الصفوف والأعمدة يعمل بشكل صحيح ويحقّق السلوك الذي كنا نهدف إليه:
وضع العناصر
من الميزات الأكثر فعالية في Grid هي إمكانية وضع العناصر بدون
الالتفات إلى ترتيب DOM. (على الرغم من أنّ برامج قراءة الشاشة تنتقل في نموذج DOM،
ننصح بشدة بأن تراعي كيفية
إعادة ترتيب العناصر لكي يكون بالإمكان الوصول إليها بشكل صحيح). إذا لم يتم وضع العناصر يدويًا، يتم وضع العناصر
في ترتيب الشبكة في DOM، مرتبة من اليسار إلى اليمين ومن أعلى إلى أسفل. ويشغل كل عنصر خلية واحدة. يمكن تغيير الترتيب الذي يتم ملء الشبكة به باستخدام
grid-auto-flow.
إذًا، كيف نضع العناصر؟ يمكن القول إنّ أسهل طريقة لوضع عناصر الشبكة هي من خلال تحديد الأعمدة والصفوف التي تغطيها. تقدّم Grid أسلوبَين لتنفيذ ذلك: في الأسلوب الأول، يمكنك تحديد نقطتَي البداية والنهاية. في الطريقة الثانية، يمكنك تحديد نقطة بداية ومدة:
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 حتى تتمكّن من بدء استخدامها اليوم.