دليل CSS Grid الشامل: شرح عملي مع ورقة غش لتصميم واجهات متجاوبة

مقدمة إلى CSS Grid ولماذا تحتاجها

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

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

ما هي CSS Grid؟

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

الميزة الأهم هنا أن Grid لا تساعدك فقط في ترتيب العناصر، بل تمنحك أساسًا مثاليًا لإنشاء تصميمات متجاوبة تتكيّف مع مختلف أحجام الشاشات دون تعقيد كبير.

وفيما يلي مثالان على شكل التخطيط عند استخدام الشبكة على الشاشات الكبيرة والصغيرة:

عرض سطح المكتب

عرض الهاتف المحمول

بنية CSS Grid وكيف تعمل

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

وتمنحك هذه الآلية مرونة كبيرة، خصوصًا عند الحاجة إلى دمج عدة أعمدة أو صفوف معًا، وهي ميزة مفيدة جدًا في بناء الواجهات المعقدة مثل الصفحات الرئيسية ولوحات التحكم.

مخطط خصائص CSS Grid

تنقسم خصائص CSS Grid إلى قسمين رئيسيين:

• خصائص الحاوية أو العنصر الأب Parent Properties.
• خصائص العناصر الداخلية أو الأبناء Child Properties.

وهذا التقسيم مهم جدًا، لأن بعض الخصائص تُكتب داخل الحاوية مثل .container، بينما خصائص أخرى تُطبّق على العناصر الداخلية مثل .box-1 و.box-2.

إعداد المشروع قبل البدء

قبل تطبيق الأمثلة، يُفضّل أن تكون لديك معرفة أساسية بكل من HTML وCSS، بالإضافة إلى استخدام محرر مثل VS Code.

1. أنشئ مجلدًا جديدًا باسم Project-1.
2. افتح المشروع في VS Code.
3. أنشئ ملفين: index.html وstyle.css.
4. فعّل إضافة Live Server لتجربة النتائج مباشرة.

ويمكنك أيضًا استخدام CodePen إذا كنت تفضّل بيئة سريعة للتجربة.

الهيكل الأساسي للمثال العملي

كود HTML

ابدأ بإنشاء ثلاثة عناصر داخل الحاوية الرئيسية:

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
</div>

إعادة ضبط الأنماط الافتراضية

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

تنسيق عنصر body

body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}

تنسيق الصناديق

[class^="box-"] {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

في المثال السابق استخدمنا الخاصية place-items لمحاذاة محتوى كل صندوق في المنتصف أفقيًا وعموديًا.

تفعيل الشبكة وإضافة مسافات

.container {
  display: grid;
  gap: 20px;
}

فهم العلاقة بين الحاوية والعناصر الداخلية

حتى تعمل CSS Grid بالشكل الصحيح، يجب التمييز بين نوعين من الخصائص:

• خصائص تُكتب داخل الحاوية الرئيسية مثل .container.
• خصائص تُكتب داخل العناصر الفرعية مثل .box-*.

بمعنى آخر، الحاوية هي التي تنشئ الشبكة، بينما العناصر الداخلية تحدد كيف تتموضع داخل هذه الشبكة.

خصائص الحاوية في CSS Grid

الخاصية grid-template-columns

تُستخدم هذه الخاصية لتحديد عدد الأعمدة وعرض كل عمود. يمكنك إدخال قيم ثابتة مثل px، أو استخدام auto، أو الاعتماد على الوحدة المرنة fr.

.container {
  display: grid;
  gap: 20px;
  grid-template-columns: 200px auto 100px;
}

عند استخدام auto، يأخذ العمود المساحة المتبقية. أما الوحدة fr فهي مثالية لتقسيم المساحة بالتساوي بين الأعمدة.

الخاصية grid-template-rows

تعمل هذه الخاصية بالطريقة نفسها، لكنها تتحكم في الصفوف بدلًا من الأعمدة.

.container {
  display: grid;
  gap: 20px;
  height: 100vh;
  grid-template-rows: 200px auto 100px;
}

الخاصية grid-template-areas

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

.container {
  display: grid;
  gap: 20px;
  height: 100vh;
  grid-template-areas:
    "A A A A A A A A A A A A"
    "B B B B B B B B B B C C"
    "B B B B B B B B B B C C";
}

ثم نربط كل عنصر باسمه:

.box-1 { grid-area: A; }
.box-2 { grid-area: B; }
.box-3 { grid-area: C; }

الخاصيتان column-gap وrow-gap

تُستخدمان لإضافة مسافات بين الأعمدة والصفوف على التوالي.

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 100px 100px 100px;
  column-gap: 50px;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 100px 100px 100px;
  row-gap: 50px;
}

الخاصية justify-items

تتحكم في محاذاة العناصر داخل خلايا الشبكة أفقيًا على المحور X.

أضف عنصرًا رابعًا:

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
</div>

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  justify-items: end;
}

الخاصية align-items

تؤدي الوظيفة نفسها تقريبًا، ولكن على المحور العمودي Y.

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  align-items: center;
}

الخاصية justify-content

تتحكم في تموضع الشبكة كاملة داخل الحاوية أفقيًا.

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  justify-content: center;
}

الخاصية align-content

تتحكم في تموضع الشبكة كاملة عموديًا داخل الحاوية.

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  align-content: center;
}

خصائص العناصر الداخلية في CSS Grid

الآن ننتقل إلى الخصائص التي تطبَّق على العناصر نفسها داخل الشبكة، وهي مفيدة جدًا عند الحاجة إلى تغيير حجم عنصر معيّن أو نقله إلى موقع محدد.

مقياس الشبكة وفهم نقاط البداية والنهاية

لفهم خصائص مثل grid-column وgrid-row، عليك أولًا استيعاب فكرة خطوط الشبكة Grid Lines. كل خلية تبدأ من خط وتنتهي عند خط آخر، ويمكنك استخدام الأرقام أو الكلمة المفتاحية span لتحديد الامتداد.

أنشئ أربعة عناصر لتجربة الخصائص التالية:

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
</div>

ولتسهيل بناء الشبكة، يمكن استخدام الدالة repeat():

grid-template-columns: repeat(5, 1fr);

وهذا يعادل كتابة:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

الوحدة fr تعني جزءًا نسبيًا من المساحة المتاحة، وهي ممتازة عند الرغبة في تقسيم العرض أو الارتفاع بالتساوي.

الخاصية grid-column

تُستخدم هذه الخاصية لتمديد العنصر عبر أكثر من عمود. وهي اختصار للخاصيتين grid-column-start وgrid-column-end.

.container {
  display: grid;
  gap: 20px;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

القيمة الافتراضية لعنصر واحد تكون عادة:

grid-column-start: 1;
grid-column-end: 2;

/* الصيغة المختصرة */
grid-column: 1 / 2;

ويمكن كتابتها أيضًا باستخدام span:

grid-column: span 1;

إذا أردت أن يمتد العنصر الأول عبر مساحة أكبر:

.box-1 {
  grid-column: 1 / 10;
}

كما يمكنك استخدام الصيغة الأبسط:

.box-1 {
  grid-column: span 9;
}

الخاصية grid-row

هذه الخاصية تؤدي الدور نفسه، لكن على مستوى الصفوف بدل الأعمدة.

.box-1 {
  grid-row: 1 / 11;
}

والصيغة البديلة باستخدام span هي:

.box-1 {
  grid-row: span 10;
}

الخاصية grid-area

تعمل هذه الخاصية مع grid-template-areas، حيث يتم أولًا تعريف مناطق التخطيط داخل الحاوية، ثم إسناد اسم المنطقة لكل عنصر داخلي.

.container {
  display: grid;
  gap: 20px;
  height: 100vh;
  grid-template-areas:
    "A A A A A A A A A A A A"
    "B B B B B B B B B B C C"
    "B B B B B B B B B B C C";
}

.box-1 { grid-area: A; }
.box-2 { grid-area: B; }
.box-3 { grid-area: C; }

الخاصية justify-self

تُستخدم لمحاذاة عنصر واحد فقط أفقيًا داخل خليته.

.container {
  display: grid;
  gap: 25px;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.box-1 {
  justify-self: start;
}

الخاصية align-self

تُستخدم لمحاذاة عنصر واحد عموديًا داخل خليته.

.container {
  display: grid;
  gap: 25px;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.box-1 {
  align-self: start;
}

الخصائص المختصرة في CSS Grid

توفر CSS Grid مجموعة من الخصائص المختصرة التي تساعدك على كتابة كود أقل وأكثر وضوحًا.

place-content

اختصار للخاصيتين align-content وjustify-content.

align-content: center;
justify-content: end;

place-content: center / end;

place-items

اختصار للخاصيتين align-items وjustify-items.

align-items: end;
justify-items: center;

place-items: end / center;

place-self

اختصار للخاصيتين align-self وjustify-self.

align-self: start;
justify-self: end;

place-self: start / end;

grid-template

اختصار للخاصيتين grid-template-rows وgrid-template-columns.

grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;

grid-template: 100px 100px / 200px 200px;

gap وgrid-gap

كلتاهما تؤديان الوظيفة نفسها، وتُستخدمان كاختصار للخاصيتين row-gap وcolumn-gap.

row-gap: 20px;
column-gap: 30px;

gap: 20px 30px;

ورقة غش سريعة لأهم خصائص CSS Grid

نصائح عملية لاستخدام CSS Grid باحتراف

• استخدم fr عندما تريد توزيع المساحات بشكل مرن ومتساوٍ.
• اعتمد على grid-template-areas إذا كان التخطيط معقدًا وتريد كودًا أسهل في القراءة.
• لا تُكثر من القيم الثابتة مثل px إلا عند الحاجة الدقيقة.
• ادمج CSS Grid مع Media Queries للحصول على تجاوب أفضل.
• استخدم الخصائص المختصرة مثل place-items وgap لتقليل طول الكود.

الخلاصة التقنية

تمنحك CSS Grid سيطرة عالية على تخطيط الصفحات مقارنةً بالأساليب التقليدية، خصوصًا عندما تحتاج إلى بناء واجهات معقّدة ومتجاوبة في الوقت نفسه. وإذا أتقنت الفرق بين خصائص الحاوية وخصائص العناصر الداخلية، فستصبح قادرًا على إنشاء بنية مرنة ونظيفة وسهلة الصيانة. من الناحية العملية، تُعد Grid خيارًا ممتازًا لتصميم الصفحات الكاملة، بينما يمكن دمجها مع Flexbox للحصول على أفضل نتيجة في المكونات الداخلية الدقيقة.