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 في سمة واحدة. ويُحقّق استخدامهما معًا تأثيرًا تراكميًا.
تحديد شبكة
للتعرّف على السمات الفردية لشبكة CSS، أنصحك بشدة بالاطّلاع على Grid By Example من تأليف "راشيل أندرو" أو Cheat Sheet من 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 Grid، تُعرف مجموعة الأعمدة والصفوف باسم المسارات. لنبدأ بتحديد مجموعة المسارات الأولى، أي الصفوف:
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;
}
نريد أن يبدأ العنوان في العمود الأول وينتهي قبل العمود الثالث. يجب أن يبدأ شريط التنقّل في الصف الثاني وأن يمتد على صفَّين في المجمل.
من الناحية الفنية، لقد انتهينا من تنفيذ التنسيق، ولكن أريد أن أعرض لك بعض ميزات الراحة التي يوفّرها لك "الشبكة" لتسهيل عملية تحديد موضع الإعلان. تتمثّل الميزة الأولى في أنّه يمكنك تسمية حدود المقاطع الصوتية واستخدام هذه الأسماء لتحديد موضعها:
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 حتى تتمكّن من بدء استخدامها اليوم.