CSS Grid في الممارسة تخطيطات مفيدة دون إطار عمل

إما Flexbox أو Grid؟ استخدم كلاهما. يتعامل Flexbox مع محور واحد — السطر أو العمود. يتعامل CSS Grid مع كلا المحاور في نفس الوقت. تُشكل هذه التمييزات قرارات التصميم الخاصة بك في كل مرة.

الخصائص التي تهم حقًا

يمكنك بناء أغلب التصميمات التي ستجد نفسك فيها باستخدام خاصية واحدة فقط: grid-template-columns, grid-template-rows, gap, grid-areaو، و place-items. إليك بطاقة مركّزة في سبعة أسطر:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center هي اختصار لـ align-items + justify-items. سطر واحد، محتوى مركّز تمامًا، دون الحاجة إلى حسابات.

وحدة fr: توقف عن التفكير بالنسب المئوية

لا تأخذ النسب المئوية في الحسبان المسافات بين العناصر. fr (وحدة مُقسّمة) توزع الباقي بعد وضع القيم المحددة. هذا يمثل شبكة 12 سطرًا:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

كل 1fr يحصل على مشاركة متساوية للمساحة المتبقية بعد إزالة المسافات. ثلاث أعمدة بـ repeat(3, 1fr) لن تتجاوز الحاوية — شيء 33.33% قد يصبح خاطئًا عند وجود فجوة.

الملء التلقائي مقابل التكيف التلقائي: شبكات متجاوبة بدون استدعاء استجابة للوحة

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

auto-fill يحتفظ بمسارات أعمدة فارغة. auto-fit يُدمجها، ويسمح للعناصر الحالية بالتوسع لملء السطر. في شبكة بطاقات، ترغب عادة في auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

هذا يمثل شبكة بطاقات متجاوبة تمامًا. لا توجد نقاط توقف. كل بطاقة على الأقل 280 بكسل عرض، ويعمل المتصفح على ترتيب ما يمكنه في السطر. عندما يقل حجم النافذة إلى أقل من 280 بكسل، ينتقل إلى سطر واحد. استخدم auto-fit إذا أردت أن تتوسع ثلاث بطاقات على شاشة واسعة لملء السطر بدل أن تبقى في أعمدة محددة مع فجوات بجانبها.

تستغرق عملية تطوير هذا النوع من التصميم يدويًا وقتًا. يمكن استخدام مولد CSS grid على الإنترنت لإعطاء تكوين بصرية للعمود، السطر، والمسافات قبل أن تكتب أي سطر — يستحق الوقت القصير الذي يوفره لاستكشاف حسابات العمود.

المناطق المسمّاة: تخطيط يمكن قراءته

تُستخدم مناطق الشبكة لاستبدال التفكير بالرقم المحدد بعناوين قابلة للقراءة. التصميم المثالي — رأس الصفحة، الجانب، المحتوى الرئيسي، وقاعدة الصفحة — هو مثال بارز:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

ال grid-template-areas السلاسل هي خريطة بصرية لتصميمك. نقطة (.) تشير إلى خلية فارغة. تغيير اسم قسم بتعديل السلاسل — دون الحاجة إلى إعادة حساب الأرقام.

أنماط شائعة أقل من 10 أسطر

بمجرد أن تمتلك الأساسيات، تختصر الأنماط المتكررة إلى بضعة أسطر فقط.

الجانب + المحتوى:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

أقسام مكدسة بتناسق رأسي:

.page-sections {
  display: grid;
  gap: 4rem;
}

شبكة أيقونات تتكشف تلقائيًا:

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

مُراقب الشبكة في أدوات تطوير Chrome

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

في التصميم اللوحة (بجانب المعتمد والتصميم)، يمكنك التحكم في ما يظهر في الطبقة: أرقام السطر، أسماء السطر، أسماء المناطق، وخطوط ممتدة تتجاوز حدود الشبكة. عندما ينهار التصميم، تفعيل أرقام السطر أثناء مراقبة الطبقة يُظهر عادةً السطر غير المنسق فورًا — أسرع من قراءة القيم الخام في لوحة grid-column التصميم.

نظام تدريبي عملي: ابدأ ببناء الهيكل في أدوات التصميم أولاً، ثم انتقل إلى ملفك الأساسي لوضع القيم بعد أن يظهر التصميم بشكل صحيح.

ما يبقى من Grid لـ Flexbox

يُعد Grid مناسبًا للهيكل ثنائي الأبعاد: أقسام الصفحة، ترتيب البطاقات، مخططات معقدة. يظل Flexbox أفضل للتدفق الأحادي — روابط التنقل التي تُختصر، مجموعات الأزرار، مدخلات النماذج مع تسميات داخلية، وفي أي مكان ترغب في توسعة أو تقليل العناصر حسب محتواها بدلًا من تعرّضها لمساحة محددة.

في الممارسة، ستحاول استخدام Grid للهيكل الخارجي وFlexbox للعناصر الداخلية. يُمكن استخدامهما بسلاسة؛ اختر ما يناسب محور المشكلة.

قد يعجبك أيضاً