شرح CSS Grid

من الاخر كده عشان نسهل الدنيا 😍

  • لو عاوز تنقل عنصر أقصى اليمين او أقصى اليسار استخدم الfloat
  • لو عاوز العناصر تكون جمب بعض وفى حالة الشاشات الصغيرة مثل الموبايل تُصبح تحت بعض استخدم الflexbox
  • لو عاوز تعمل تخطيط كامل للصفحة بتاعتك زي الصورة دي 👇 استخدم ال CSS grid حتى أصلا اسمه Grid Layout و Layout معناها تخطيط او تصميم زي الي في الصورة كدة
CSS grid
تخطيط الصفحة باستخدام ال CSS grid


لو تفتكر في ال flexbox قلنا ان العناصر في الأساس تعتمد على ان يوجد عنصر اب (parent element) وعناصر داخل هذا الأب (child element) ونفس الكلام في ال CSS grid يوجد عنصر اب وعناصر داخل هذا الاب وللتوضيع أكثر انظر المثال التالي 👇

 
<!DOCTYPE html>
<html lang="en">
 
  <head>
    <meta charset="UTF-8" />
    <style>
        .container {display: grid;}
     </style>
  </head>
 
  <body>
    <div class="container">
      <div class="child"> child 1 </div>
      <div class="child"> child 2 </div>
      <div class="child"> child 3 </div>
    </div>
  </body>
</html>

وهذه الاكواد تُعطى النتيجة التالية:

CSS grid
parent (container) element VS child element

وبالتالي أكواد ال grid CSS تنقسم الى جزئين:

A- اكواد خاصة بالعنصر الأب (parent element)

B- أكواد خاصة بالعناصر التي بداخل العنصر الاب (child elements)


⚠ يوجد طريقتين لاستخدام ال CSS grid

الطريقة الاولي سوف يتم شرحها في chapter1 كما هو مُقسم في الفهرس.

الطريقة الثانية سوف يتم شرحها في chapter2 كما هو موجود في الفهرس.


- انا شخصياً اُفضل الطريقة الثانية لذلك اعمل بها في المشاريع الخاصة بي


الفهرس

Chapter 1


child element

  1. grid-column: بداية عرض العنصر / نهاية عرض العنصر ;
  2. grid-row: بداية ارتفاع العنصر / نهاية ارتفاع العنصر ;
Chapter 2

parent element

  1. display: grid;
  2. grid-template-areas: ". . ."
    ". . ."
    ". . .";
  3. gap: المسافة بين الصفوف المسافة بين الاعمدة
  4. justify-content: center;
  5. align-content: center;

child element

  1. grid-area: اسم خاص للعنصر;

أهم حاجة في الليلة دي كلها

لما تقسم الموقع بتاعك بال CSS grid ف انت بتعمل خطوتين أساسيتين:

1 يتم تقسيم المساحة الى صفوف واعمدة وهمية (غير مرئية) كما هو موضح بالصورة 👇

CSS grid
CSS grid system number

2 يتم وضع العناصر داخل هذه الصفوف والاعمدة كما في الصورة 👇

CSS grid
CSS grid layout

شرح الاكواد

أولاً بالنسبة للعنصر الاب (parent elements)

1 display: grid;

- شرحنا خاصية الdisplay في في درس خاص به
وإذا أردنا الاستفادة من مميزات ال CSS grid فإننا نضع display: grid; للعنصر الاب ثم نستخدم باقي الاكواد التي بالأسفل.

⚠ وعندما نستخدم هذا الكود فيُمكن ان نتحكم في العناصر رأسياً و افقيا في نفس الوقت؛ على عكس الflexbox الذى يُمكننا فقط من التحكم في العناصر اما رأسياً فقط او افقياً فقط.

2 grid-template-columns: 100px 30% 1fr;

وظيفة هذا الكود:

  1. تحديد عدد الاعمدة الوهمية (في هذا الكود 3 أعمدة)
  2. تحديد عرض كل عمود (في هذه الحالة عرض الأول 100px وعرض الثاني 30% من عرض العنصر الاب والعمود الثالث يأخذ باقي المساحة الفارغة) كما هو موضح بالصورة 👇

CSS grid
CSS grid >> columns line numbers

⚠ الfr اختصار fraction وتعني النسبة
نسبه ايه؟
ج/ نسبة المساحة المتبقية
مثال علي ذلك:
grid-template-columns: 25% 25% 25% 25%;
في هذه الحالة يتم تقسيم المساحة الى 4 أعمدة وعرض كل عمود 25% من عرض ال container
وايضاً هو هو نفس الكود لو كتبته بالطريقة دي
grid-template-columns: 1fr 1fr 1fr 1fr;
وتعني تقسيم المساحة الي اربع اعمدة متساوية في العرض
مثال علي ذلك اضغط هنا




3 grid-template-rows: 100px 110px 120px;

وظيفة هذا الكود:

  1. تحديد عدد الصفوف الوهمية (في هذه الحالة 3 صفوف)
  2. تحديد ارتفاع كل صف (في هذا الكود ارتفاع الصف الأول 100px وارتفاع الصف الثاني 110 px وارتفاع الصف الثالث 120px) كما هو موضح بالصورة 👇

CSS grid
CSS grid >> rows line numbers


مثال علي ذلك اضغط هنا



مثال اخر ومعلومة جديدة:

grid-template-rows: 100px 100px 100px 100px;
في هذه الحالة يتم تقسيم المساحة الى أربع صفوف وارتفاع كل صف 100px
ويُمكن كتابه هذا الكود عن طريق خاصية ال repeat( , ) كالتالي:
grid-template-rows: repeat(4, 100px);
الشرح:

repeat(ارتفاع الصف, عدد الصفوف);
repeat(عرض العمود, عدد الاعمدة);




4 gap: المسافة بين الأعمدة    المسافة بين الصفوف;

مثال علي ذلك
gap: 10px 50px;
معنى ذلك ان:
- المسافة بين الصفوف 10px
- المسافة بين الاعمدة 50px


CSS grid
CSS grid gap

معلومة ملهاش لازمة 🙃
زمان في بداية ال CSS grid الكود ده كان اسمة grid-gap: وبعد كده بقا اسمه gap: بس كده 🤓


5 justify-content: center;

وشرحنا الكود دا في درس ال flexbox؛ اكيد فاكر طبعاً 😊
وظيفة هذا الكود:
التحكم في الحركة الافقية (علي محور الx) لجميع العناصر الأطفال (child elements)
ولكن
- نستبدل ال flex-start ب start
- نستبدل ال flex-end ب end


وهذه اهم قيم ال justify-content
justify-content:
center;جعل العناصر في المنتصف على المستوي الأفقي
start;القيمة الافتراضية
end;عكس start 😉
space-between;Space between the elements 😉
space-around;Space around the elements 😉

لو عاوز تعرف كل قيمة من دول بتعمل ايه اضغط هنا



6 align-content: center;

وشرحنا الكود دا في درس ال flexbox؛ اكيد فاكر طبعاً 😊
وظيفة هذا الكود:
التحكم في الحركة الرأسية (علي محور الy) لجميع العناصر الأطفال (child elements)
ولكن
- نستبدل ال flex-start ب start
- نستبدل ال flex-end ب end


وهذه اهم قيم ال align-content
align-content:
center;جعل العناصر في المنتصف على المستوي الرأسي
start;في الاعلي
end;عكس start 😉
space-between;Space between the elements 😉
space-around;Space around the elements 😉

لو عاوز تعرف كل قيمة من دول بتعمل ايه اضغط هنا

ثانياً بالنسبة للعناصر ال child

حتى هذه اللحظة احنا المفروض قسمنا المساحة الى صفوف وأعمدة وهمية (غير مرئية) وحددنا ارتفاع وعرض الخلايا داخل ال grid كما في الصورة 👇

CSS grid
CSS grid cell

1 grid-column: نهاية عرض العنصر / بداية عرض العنصر ;


يعني ايه بقا الكود ده يا صاحبي !! ؟
زي ما انت عارف اننا حتى هذه اللحظة عملنا صفوف وأعمدة وهمية وانا عاوز احط العناصر الchild داخل هذه الصفوف و الاعمدة.
كيفية وضع العناصر الchild داخل هذه الصفوف و الاعمدة؟
ج/ عن طريق تحديد بداية ونهاية خط العمود وبداية ونهاية خط الصف.
س/ كيفية تحديد بداية ونهاية خط العمود لعنصر معين؟
ج/ عن طريق ارقام الخطوط (الدوائر الحمراء) التي في الأعلى.

انت: طب قول مثال عشان مش فاهم 😊
انا : ثواني بس اشرح الكود التالي واقولك علي مثال 😊

س/ كيفية تحديد بداية ونهاية خط الصف لعنصر معين؟
عن طريق الكود التالي:


2 grid-row: نهاية ارتفاع العنصر / بداية ارتفاع العنصر ;


كيف يعني؟
عن طريق ارقام الخطوط (الدوائر الحمراء) التي على اليمين

مثال علي ذلك

إذا أردنا وضع العنصر header في اول خليتين كما هو موضح بالصورة 👇 ماذا نفعل؟

CSS grid
CSS grid >> header in 2 cells

لكي تضع الheader داخل اول خليتين (في الصف الأول):
أولا يجب تحديد بداية ونهاية الخط الرأسي
ثانياً تحديد بداية ونهاية الخط الأفقي.

أولاً تحديد بداية ونهاية الخط الرأسي عن طريق ارقام الخطوط (الدوائر الحمراء) التي في الأعلى.
بداية الخط الرأسي: 1
نهاية الخط الرأسي: 3
ويكون الكود كالتالي:

grid-column:1 / 3;

ثانياً تحديد بداية ونهاية الخط الخط الأفقي عن طريق ارقام الخطوط (الدوائر الحمراء) التي على اليمين.
بداية الخط الأفقي: 1
نهاية الخط الأفقي: 2
ويكون الكود كالتالي:

grid-row: 1 / 2

Chapter 2

grid-area

- الطريقة الثانية لعمل ال grid والتي اعتبرها أسهل من الطريقة الاولي (من وجهة نظري) وهي عن طريق ال grid area وأيضا يوجد عنصر اب وعناصر child داخل هذا الاب - وفي هذه الطريقة لا يتم تقسيم الصفحة عن طريق الخطوط الوهمية ولكن عن طريق إعطاء كل عنصر اسم خاص به.
وهذه 👇 هي الاكواد المُستخدمة في هذه الطريقة

parent element

  1. display: grid;
  2. grid-template-areas: ". . ."
    ". . ."
    ". . .";
  3. gap: المسافة بين الصفوف المسافة بين الاعمدة
  4. justify-content: center;
  5. align-content: center;

child element

  1. grid-area: اسم خاص للعنصر;

وكما تلاحظ انه يوجد عدد كبير من الاكواد المُستخدمة في الطريقة الاولي والاختلاف هو:


بالنسبة للعنصر الاب

1 حذف الاكواد التالية
grid-template-columns: auto;
grid-template-rows: auto;
واستبدالها ب
grid-template-areas:". . .";

بالنسبة للعناصر ال child

1 حذف الاكواد التالية
grid-column: نهاية عرض العنصر / بداية عرض العنصر ;
grid-row: نهاية ارتفاع العنصر / بداية ارتفاع العنصر ;
واستبدالها ب
grid-area: اسم خاص للعنصر;

شرح الاكواد الجديدة

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

CSS grid
CSS grid cell 3x3

فنستخدم الكود التالي:
grid-template-areas:
". . ."
". . .";
معني هذا الكود ان لدينا صفين و3 أعمدة
والنقط تُشير الي ان هذا الجزء فارغ لا يوجد به أي محتويات
وبعد ذلك نُعطي لكل عنصر اسم مُميز خاص به عن طريق الكود التالي:
grid-area: اسم خاص للعنصر;
مثال علي ذلك:
إذا أردنا تقسيم الصفحة كما بالشكل التالي 👇

CSS grid
CSS grid area

فإننا نلاحظ تقسيم الصفحة الي 4 أعمدة و 3 صفوف وبالتالي لدينا 12 خلية
ونحن نريد وضع العناصر التالية (header, main, sidebar, footer) كما هو موضح داخل الصورة 👆
ونلاحظ انه يوجد جزء فارغ في الصورة بين ال main وال sidebar

ونقوم بذلك عن طريق خطوتين:
1 تسميه كل عنصر ب اسم خاص به عن طريق الكود التالي:
grid-area: اسم خاص للعنصر;
كما هو موضح بالأكواد 👇

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
          .child1 {grid-area: myhaeder;}
          .child2 {grid-area: mymain;}
          .child3 {grid-area: myside;}
          .child4 {grid-area: myfooter;}
    </style>
  </head>
 
  <body>
    <div class="container">
      <header class="child1">header</header>
      <main class="child2">main</main>
      <aside class="child3">sidebar</aside>
      <footer class="child4">footer</footer>
    </div>
  </body>
</html>

وبالتالي:
- عنصر الheader اصبح اسمه myhaeder
- عنصر الmain اصبح اسمه mymain
- عنصر الheader اصبح اسمه myside
- عنصر الmain اصبح اسمه myfooter


2 الخطوة التالية هي وضع كل عنصر في المكان الخاص به عن طريق اسمة الجديد؛ عن طريق الكود التالي:

 
grid-template-areas:
  "myhaeder  myhaeder  myhaeder myhaeder"
  "mymain mymain  .  myside"
  "myfooter myfooter myfooter myfooter";

⚠ مع ملاحظة ان النقطة (.) تُمثل المكان الفارغ

ويكون الكود النهائي كالتالي:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
          .child1 {grid-area: myhaeder;}
          .child2 {grid-area: mymain;}
          .child3 {grid-area: myside;}
          .child4 {grid-area: myfooter;}
 
      .container {
        display: grid;
        grid-template-areas:
          "myhaeder  myhaeder  myhaeder myhaeder"
          "mymain mymain . myside"
          "myfooter myfooter myfooter myfooter";
      }
    </style>
  </head>
 
  <body>
    <div class="container">
      <header class="child1">header</header>
      <main class="child2">main</main>
      <aside class="child3">sidebar</aside>
      <footer class="child4">footer</footer>
    </div>
  </body>
</html>
😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك