CSS GRID

السلام عليكم ورحمه الله وبركاته في هذا الدرس إن شاء الله سنتعرف على إحدى أعظم الخصائص في لغة CSS و هو CSS Grid إذا كمقدمة ماهو CSS Grid ؟

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

لبدء استخدام CSS Grid ، يجب عليك تحديد العناصر التي تريد تقسيمها. يمكن أن تكون العناصر الأساسية عناصر HTML المختلفة ، مثل divs أو sections. ومن ثم ، يمكنك استخدام خاصية display لتعيين نوع العنصر على grid.

display: grid

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

لتفهم خاصية display: grid بشكل أفضل ، يمكننا النظر إلى مثال بسيط. لنفترض أن لدينا عنصر div مع العديد من العناصر الفرعية داخله. سنستخدم خاصية display: grid لتحويل هذا العنصر إلى شبكة.

HTML

<div class="grid-container">
    <div class="item-1">عنصر 1<div>
    <div class="item-2">عنصر 2<div>
    <div class="item-3">عنصر 3<div>
    <div class="item-4">عنصر 4<div>
    <div class="item-5">عنصر 5<div>
    <div class="item-6">عنصر 6<div>
</div>

CSS

.grid-container {
    display: grid;
}

في هذا المثال ، نحن نحدد display: grid للعنصر الرئيسي div. هذا يحول العنصر إلى شبكة. والآن ، يمكننا البدء في تحديد العمود والصف داخل الشبكة.

grid-template-columns

خاصية grid-template-columns هي خاصية CSS التي تستخدم في تعريف عدد الأعمدة وعرضها في شبكة CSS Grid. تسمح هذه الخاصية للمطورين بتحديد عرض الأعمدة والتحكم في مساحة الشبكة. يتم تحديد الأعمدة باستخدام الوحدات النسبية أو الثابتة.

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

HTML

<div class="grid-container">
    <div class="item-1">عنصر 1<div>
    <div class="item-2">عنصر 2<div>
    <div class="item-3">عنصر 3<div>
    <div class="item-4">عنصر 4<div>
    <div class="item-5">عنصر 5<div>
    <div class="item-6">عنصر 6<div>
</div>

CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

في هذا المثال ، تم تحديد الأعمدة باستخدام grid-template-columns وتم تعيين قيمة 1fr لكل عمود. تتحكم هذه القيمة في عرض الأعمدة وتحدد النسبة المئوية لعرض كل عمود بالنسبة للشبكة الكاملة. في هذا المثال ، يعني ذلك أن الشبكة تحتوي على ثلاثة أعمدة متساوية.

يمكن أيضًا استخدام الوحدات الثابتة لتحديد عرض الأعمدة. على سبيل المثال ، إذا كنت ترغب في تعيين العمود الأول بعرض 100 بكسل ، يمكنك استخدام التعليمة البرمجية التالية:

CSS

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
}

في هذا المثال ، تم تحديد العمود الأول بعرض 100 بكسل ، بينما تم تحديد العمودين الآخرين بالحجم نفسه باستخدام 1fr.

باختصار ، خاصية grid-template-columns تستخدم لتحديد عرض الأعمدة وتحكم في مساحة الشبكة. يمكن استخدام

الوحدات النسبية أو الثابتة لتحديد عرض الأعمدة. يمكن استخدامها بسهولة وبشكل مفيد في تحسين تخطيطات الويب.

grid-template-rows

خاصية grid-template-rows هي إحدى خصائص CSS Grid التي تقوم بتعريف عدد الصفوف وارتفاع كل صف في الشبكة. تستخدم هذه الخاصية لتحديد توزيع العناصر على شبكة العرض.

يمكن تعريف grid-template-rows باستخدام أحد الأساليب التالية:

1) قيم متعددة مفصولة بفواصل، تمثل ارتفاع كل صف. على سبيل المثال، "grid-template-rows: 100px 200px 150px;".

2) قيمة واحدة تمثل ارتفاع كل صف بالتساوي. على سبيل المثال، grid-template-rows: repeat(3, 100px); .

3) قيمة واحدة تمثل ارتفاع كل صف بنسبة مئوية من ارتفاع الشبكة. على سبيل المثال، "grid-template-rows: 25% 50% 25%;".

فيما يلي مثال لاستخدام خاصية grid-template-rows:

CSS

.grid-container {
    display: grid;
    grid-template-rows: 100px 200px 150px;
}

في هذا المثال، يتم تعريف شبكة العرض باستخدام خاصية grid-template-rows وتحديد ارتفاع الصفوف على التوالي بـ 100 بكسل و 200 بكسل و 150 بكسل. يمكن وضع العناصر داخل هذه الأعمدة باستخدام خاصية grid-row.

باختصار، خاصية grid-template-rows تساعد على تحديد عدد الصفوف وارتفاع كل صف في شبكة العرض. يمكن استخدامها لتحديد توزيع العناصر على الشبكة بطريقة سهلة وبديهية.

grid-template

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

يمكن استخدام الخاصية grid-template بعدة طرق، حيث يمكن تحديد مجموعة من الأعمدة والصفوف باستخدام الفواصل أو الفواصل الإضافية، وكذلك يمكن تحديد العرض والارتفاع لكل خلية في الشبكة باستخدام قيم الطول المختلفة مثل px أو em أو % وغيرها.

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

على سبيل المثال، يمكن استخدام الخاصية grid-template لتحديد شبكة مكونة من ثلاثة أعمدة وارتفاع يحدده المحتوى، وتوزيع العناصر داخل الشبكة باستخدام أسماء المناطق كالتالي:

CSS

.grid-container {
    display: grid;
    grid-template:
        "header header header" 50px
        "sidebar content content" auto
        "footer footer footer" 50px / 1fr 2fr 1fr;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}
.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

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

grid-column-start...

خاصية grid-column-start و grid-column-end و grid-row-start و grid-row-end هي خاصيات تستخدم في نظام تصميم الشبكة Grid والتي تحدد موقع العنصر داخل الشبكة. تحدد grid-column-start و grid-column-end موقع العنصر على مستوى الأعمدة وتحدد grid-row-start و grid-row-end موقع العنصر على مستوى الصفوف. يمكن تحديد قيم هذه الخاصيات باستخدام الأرقام أو باستخدام الكلمات الاحتياطية مثل span و auto.

بدلاً من استخدام الخاصيات الفردية، يمكن استخدام خاصيات grid-column و grid-row التي تجمع بين الخاصيات الأربعة في خاصية واحدة، حيث يتم تحديد قيمة grid-column باستخدام القيمة start و end أو باستخدام توحيد القيم في قيمة واحدة. يتم تحديد قيمة grid-row بنفس الطريقة.

على سبيل المثال، يمكن استخدام الخاصيات grid-column-start و grid-column-end و grid-row-start و grid-row-end لتحديد موقع عنصر في شبكة مكونة من ثلاثة أعمدة وثلاثة صفوف كالتالي:

CSS

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

في هذا المثال، تم تحديد موقع العنصر في الأعمدة من العمود الأول إلى العمود الثالث باستخدام grid-column-start و grid-column-end. كما تم تحديد موقع العنصر في الصفوف من الصف الثاني إلى الصف الرابع باستخدام grid-row-start و grid-row-end.

بدلاً من ذلك، يمكن استخدام خاصيات grid-column و grid-row لتحقيق نفس النتيجة كالتالي:

CSS

.item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

في هذا المثال، تم استخدام خاصية grid-column و grid-row لتحديد موقع العنصر في الأعمدة والصفوف بنفس الوقت. استخدمت قيمة 1 / 3 في grid-column لتحديد موقع العنصر في الأعمدة من العمود الأول إلى العمود الثالث، واستخدمت قيمة 2 / 4 في grid-row لتحديد موقع العنصر في الصفوف من الصف الثاني إلى الصف الرابع.

في النهاية، يمكن استخدام خاصيات grid-column-start و grid-column-end و grid-row-start و grid-row-end أو خاصيات grid-column و grid-row لتحديد موقع العناصر داخل الشبكة بطريقة مرنة ومناسبة للتصميم المطلوب.

grid-area

خاصية grid-area هي خاصية في نظام تصميم الشبكة Grid والتي تسمح بتحديد موقع العنصر داخل الشبكة باستخدام أسماء المناطق. تتكون قيمة هذه الخاصية من أربع قيم مفصولة بالمسافة، حيث تحدد القيم الأولى والثانية موقع العنصر على مستوى الأعمدة والقيم الثالثة والرابعة موقع العنصر على مستوى الصفوف.

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

على سبيل المثال، يمكن استخدام الخاصية grid-area لتحديد موقع عنصر في شبكة مكونة من ثلاثة أعمدة وثلاثة صفوف كالتالي:

CSS

.item {
    grid-area: sidebar;
}

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

CSS

.grid-container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

في هذا المثال، تم تعريف ثلاث مناطق باسم header و sidebar و footer، وتم تحديد موقع العناصر باستخدام أسماء المناطق باستخدام خاصية grid-area.

يمكن استخدام الخاصية grid-area لتحديد موقع العناصر باستخدام أي منطقة معرفة في خاصية grid-template-areas، كما يمكن تحديد موقع العناصر باستخدام مجموعة من الأسماء المفصولة بالمسافة لتحديد موقع العنصر في أكثر من منطقة في الشبكة.

باستخدام خاصية grid-area، يمكن تحديد موقع العناصر بسهولة ومرونة باستخدام أسماء المناطق، وهذا يسمح بتقسيم الشبكة إلى مناطق مختلفة وتحديد مواضع العناصر داخلها بطريقة سهلة ومنظمة

justify-content...

خصائص justify-content و align-content و align-itemsو place-content و place-items هي خصائص في CSS تستخدم في تنسيق وتحديد موقع العناصر داخل عنصر والتحكم في التباعد والتراص بينهم.

1) justify-content: يستخدم هذا الخاصية لتحديد موقع العناصر داخل العنصر على مستوى المحور الأفقي (الأعمدة)، حيث يمكن تحديد موقع العناصر بالتأرجح فيما بينها (flex-start, flex-end، center، space-between، space-around، space-evenly).

2) align-content: يستخدم هذا الخاصية لتحديد موقع العناصر داخل العنصر على مستوى المحور الرأسي (الصفوف)، حيث يمكن تحديد موقع العناصر بالتأرجح فيما بينها (flex-start, flex-end، center، space-between، space-around، stretch).

3) align-items: يستخدم هذا الخاصية لتحديد موقع العناصر داخل العنصر على مستوى المحور الرأسي (الصفوف)، حيث يمكن تحديد موقع العناصر بالتأرجح فيما بينها (flex-start, flex-end، center، baseline، stretch).

4) place-content: يستخدم هذا الخاصية لتحديد موقع العناصر داخل العنصر على مستوى المحور الأفقي والرأسي (الأعمدة والصفوف)، حيث يمكن تحديد موقع العناصر بالتأرجح فيما بينها (flex-start, flex-end، center، space-between، space-around، space-evenly، stretch).

5) place-items: يستخدم هذا الخاصية لتحديد موقع العناصر داخل العنصر على مستوى المحور الأفقي والرأسي (الأعمدة والصفوف)، حيث يمكن تحديد موقع العناصر بالتأرجح فيما بينها (flex-start, flex-end، center، baseline، stretch).

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

gap

خاصية gap هي خاصية في CSS تستخدم في نظام تصميم الشبكة Grid و Flexbox لتحديد المسافة بين العناصر داخل العنصر الأب.

تستخدم هذه الخاصية لتحديد المسافة بين العناصر الفرعية داخل العنصر الأب، سواء كانت هذه العناصر موجودة في الشبكة (Grid) أو في تنظيم المرونة (Flexbox).

تحدد قيمة هذه الخاصية المسافة بين العناصر على محور الأفقي والرأسي. يمكن تحديد القيمة بوحدات قياس مختلفة مثل البكسل، النسبة المئوية، والإم (em).

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

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

grid-auto-columns...

خاصية grid-auto-columns و grid-auto-rows و grid-auto-flow هي خصائص في نظام تصميم الشبكة CSS Grid تستخدم لتحديد حجم الصفوف والأعمدة المنشأة تلقائياً داخل الشبكة.

1) grid-auto-columns: تستخدم لتحديد حجم الأعمدة التي يتم إنشاؤها تلقائياً في الشبكة. يمكن تحديد قيمة هذه الخاصية بوحدات الطول المختلفة مثل البكسل أو النسبة المئوية أو الـfr.

2) grid-auto-rows: تستخدم لتحديد حجم الصفوف التي يتم إنشاؤها تلقائياً في الشبكة. يمكن تحديد قيمة هذه الخاصية بنفس الوحدات المذكورة في خاصية grid-auto-columns.

3) grid-auto-flow: تستخدم لتحديد ترتيب وطريقة توزيع العناصر التي لم تتم تحديدها داخل الشبكة بشكل صريح. يمكن تحديد قيمتها إما row لتوزيع العناصر في الصفوف بالتسلسل، أو column لتوزيع العناصر في الأعمدة بالتسلسل، أو dense لتعبئة المساحات الفارغة داخل الشبكة بكل العناصر المتاحة بدلاً من تركها فارغة.

تساعد هذه الخصائص في تحديد حجم الصفوف والأعمدة التي يتم إنشاؤها تلقائياً، وتحديد طريقة توزيع العنا

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

1fr vs auto

وحدة 1fr و auto هما وحدتان مهمتان في نظام تصميم الشبكة CSS Grid و Flexbox، وتستخدمان لتحديد حجم العناصر داخل النظام.

1) 1fr: هي وحدة تستخدم لتحديد توزيع العرض أو الارتفاع للعناصر في النظام بناءً على نسبة محددة. وتعني "جزء واحد من الفراغ"، حيث يتم تقسيم المساحة المتاحة بين العناصر بناءً على هذه النسبة. على سبيل المثال، إذا كان لدينا ثلاث عناصر وحجم الشبكة هو 300 بكسل، يمكن تحديد حجم العناصر على النحو التالي: `1fr 2fr 1fr`، وبالتالي يتم تقسيم المساحة بنسبة 1:2:1 بين العناصر.

2) auto: هي وحدة تستخدم لتحديد حجم العنصر بناءً على حجم محتواه. وتعني "تلقائياً"، حيث يتم تعيين حجم العنصر بناءً على حجم محتواه. على سبيل المثال، إذا كان لدينا عنصر يحتوي على نص، فسيتم تحديد حجم العنصر بناءً على حجم النص.

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

minmax and auto-fill

دالة minmax و auto-fill هما خصائص مهمة في نظام تصميم الشبكة Grid في CSS، وتستخدمان لتحديد حجم العناصر داخل الشبكة.

1) minmax: هي دالة تستخدم لتحديد الحد الأدنى والأقصى لحجم العنصر. تتكون الدالة من اثنين من القيم، الأولى تحدد الحد الأدنى لحجم العنصر، والثانية تحدد الحد الأقصى. على سبيل المثال، يمكن استخدام minmax(100px, 1fr) لتحديد أن العنصر لا يمكن أن يصغر إلى أقل من 100 بكسل، ولا يمكن أن يكبر أكثر من الفراغ المتاح.

2) auto-fill: هي خاصية تستخدم مع minmax لتحديد عدد العناصر التي يمكن وضعها داخل الشبكة. تعمل auto-fill على تكرار العناصر الفرعية حتى يتم ملء المساحة المتاحة، وتتوقف عن إنشاء المزيد من العناصر بمجرد أن يتم ملء المساحة.

يمكن استخدام minmax و auto-fill معًا في نظام تصميم الشبكة Grid لتحديد عدد العناصر التي يمكن وضعها داخل الشبكة بشكل مرن ودقيق. على سبيل المثال، يمكن استخدام grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); لتحديد عرض الأعمدة التي يمكن وضعها داخل الشبكة، حيث يتم تكرار العناصر الفرعية التي تحتوي على العرض الذي يتراوح بين 200 بكسل والفراغ المتاح، مع توقف إنشاء المزيد من العناصر بمجرد ملء المساحة المتاحة.

Example:

CSS

.grid-container {
.cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
.card {
    margin: 20px;
}
.img {
    width: 100%;
}
.img img {
    width: 100%;
    border-radius: 0 0 50% 0;
}
.text {
    padding: 10px;
}
.text h2{
    color: #333;
}
.text span {
    color: #f45;
}
.text p {
    color: #777
}
.links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.links button {
    border: none;
    outline: none;
    background-color: #f45;
    color: #fff;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 17px;
}

HTML