CSSGrid

ما هو Grid

Grid هو مجموعة من الخصائص التي يمكنك استخدامها لتحديد مواقع و أحجام العناصر بشكل مرن جداً مهما كان مخطط التصميم معقد.

في هذا الدرس سنتعرف على جميع الخصائص التالية و القيم التي يمكن إعطائها لها:

column-gap gap grid grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows row-gap

البدء باستخدام Grid

لتفهم كيف تستطيع ترتيب العناصر بأسلوب Grid سنفترض بدايةً أنه عندنا العناصر التالية.

<div>1</div>
<div>2</div>
<div>3</div>

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

<div class="grid-container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
</div>

الآن يجب إعطاء العنصر الذي يمثّل الحاوية الخاصية display:grid; كما يلي.
ملاحظة: العناصر ستظهر تحت بعضها البعض و سبب ذلك أننا لم نحدد مواقعها.

.grid-container {
    display: grid;
}

الفرق بين Flex و Grid

Flex يعتبر خيار أسهل و أنسب إن كان المراد عرض العناصر وراء بعضها البعض أفقياً أو عمودياً، و هو يغنيك تماماً عن استخدام الخاصية float.

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

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

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

في المثال التالي قمنا باستخدام الخاصية grid-template-columns لتقسيم الحاوية أفقياً، و قد قمنا بإعطاءها 3 قيم auto مما يعني أن عدد العناصر الأقصى على كل سطر هو ثلاثة و أحجام الأعمدة يتم تحديدها بشكل تلقائي على قدر حاجتها.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

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

في المثال التالي قمنا باستخدام الخاصية grid-template-rows لتحديد كم سيكون طول كل سطر منهم.
ملاحظة: هنا كل قيمة يتم وضعها يتم إعتبارها الطول المراد وضعه للسطر بحسب ترتيبه.

هنا السطرين الأول و الثالث أعطيناهما القيمة auto مما يعني أن طولهما سيتحدد بشكل تلقائي نسبةً لأطول عنصر موضوع فيهم، أما السطر الثاني فجعلنا حجمه 100 بكسل.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 100px auto;
}

الخصائص grid-column-start grid-column-end grid-column

الهدف الأساسي لهذه الخصائص هو جعل العنصر يظهر على أكثر من عمود في ذات السطر، و فيما يلي فائدة كل واحدة منها:

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

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

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

في المثال التالي قمنا باستخدام الخاصية grid-column لتحديد أن العنصر سيبدأ من العمود الأول و سيتوقف قبل العنصر الثالث و بالتالي سنحصل على نفس نتيجة المثال السابق.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

في المثال التالي قمنا باستخدام الكلمة المفتاحية span مع الخاصية grid-column لتحديد أن العنصر سيبدأ من العمود الأول و سيتمدد على عمودين و بالتالي سنحصل على نفس نتيجة المثال السابق أيضاً.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.item-1 {
    grid-column: 1 / span 2; 
}

الخصائص grid-row-start grid-row-end grid-row

الهدف الأساسي لهذه الخصائص هو جعل العنصر يظهر على أكثر من سطر في ذات السطر، و فيما يلي فائدة كل واحدة منها:

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

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

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

في المثال التالي قمنا باستخدام الخاصية grid-column لتحديد أن العنصر سيبدأ من السطر الأول و سيتوقف قبل السطر الثالث و بالتالي سنحصل على نفس نتيجة المثال السابق.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

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

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.item-1 {
    grid-row: 1 / span 2; 
}

إظهار العنصر على أكثر من عمود و سطر

في المثال التالي قمنا باستخدام الخاصية grid-row لجعل العنصر يبدأ من السطر الأول إلى السطر الثاني و قمنا باستخدام الخاصية grid-column لجعله يظهر من العمود الأول إلى العمود الثاني.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

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

الخاصية grid-auto-flow

إذا لم تكن سترتب العناصر في مواقع محددة في الحاوية، يمكنك استخدام الخاصية grid-auto-flow لجعل العناصر تصطف أفقياً أو عمودياً في المساحات المتوفرة. فيما يلي القيم التي يمكنك إعطاءها لها.

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

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

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: row;
}

.item-1, .item-2 {
    grid-column: auto/span 2;
}

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

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
}

.item-1, .item-2 {
    grid-column: auto/span 2;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-flow القيمة dense لكي يتم صف العناصر في أي مكان متوفر.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: dense;
}

.item-1, .item-2 {
    grid-column: auto/span 2;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-flow القيمة row dense لكي يتم صف العناصر في أي مكان متوفر على ذات السطر.
ملاحظة: العناصر ستترتب كما في المثال السابق لأنه في الحالتين العناصر سيتم صفها سطراً سطراً.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: row dense;
}

.item-1, .item-2 {
    grid-column: auto/span 2;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-flow القيمة column dense لكي يتم صف العناصر في أي مكان متوفر و بشكل عمودي.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column dense;
}

.item-1, .item-2 {
    grid-column: auto/span 2;
}

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

يمكنك استخدام الخاصية grid-auto-columns لتحديد عرض الأعمدة. فيما يلي القيم التي يمكنك إعطاءها لها.

في المثال التالي قمنا بإعطاء الخاصية grid-auto-columns القيمة auto لجعل عرض الأعمدة يتحدد بشكل تلقائي.
ملاحظة: عرض الأعمدة قد يظهر لك بشكل متساوي في حال كان حجمها صغير جداً نسبةً للمساحة المتوفرة في الحاوية.

.grid-container {
    display: grid;
    grid-auto-columns: auto;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-columns القيمة min-content لجعل أحجام الأعمدة تتحدد بشكل تلقائي نسبةً لأصغر عنصر موجود في العمود.

.grid-container {
    display: grid;
    grid-auto-columns: min-content;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-columns القيمة 1fr لجعل أحجام الأعمدة تنقسم بشكل متساوي.

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

في المثال التالي قمنا بإعطاء الخاصية grid-auto-columns الدالة minmax() كقيمة لتحديد أصغر و أكبر حجم مراد للأعمدة.

.grid-container {
    display: grid;
    grid-auto-columns: minmax(50px, auto);
}

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

يمكنك استخدام الخاصية grid-auto-rows لتحديد طول الأسطر. فيما يلي القيم التي يمكنك إعطاءها لها.

في المثال التالي قمنا بإعطاء الخاصية grid-auto-rows القيمة auto لجعل طول الأسطر يتحدد بشكل تلقائي.
ملاحظة: طول الأسطر قد يظهر لك بشكل متساوي في حال كانت تحتاج سطر واحد فقط للظهور كما في المثال التالي، و بالطبع يمكنك إضافة المزيد من الكلام بداخل أي عنصر حتى تلاحظ كيف سيتغير طول السطر بأكمله.

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

في المثال التالي قمنا بإعطاء الخاصية grid-auto-rows القيمة min-content لجعل أحجام الأعمدة تتحدد بشكل تلقائي نسبةً لأصغر عنصر موجود في العمود.

.grid-container {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: min-content;
}

في المثال التالي قمنا بإعطاء الخاصية grid-auto-rows القيمة 1fr لجعل أحجام الأعمدة تنقسم بشكل متساوي.

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

في المثال التالي قمنا بإعطاء الخاصية grid-auto-rows الدالة minmax() كقيمة لتحديد أصغر و أكبر حجم مراد للأعمدة.

.grid-container {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: minmax(50px, auto);
}

الخصائص grid-row-gap grid-column-gap gap

الهدف الأساسي لهذه الخصائص هو إضافة هامش بين العناصر، و فيما يلي فائدة كل واحدة منها:

• الخاصية grid-row-gap يمكنك استخدامها لإضافة هامش بين الأسطر.
• الخاصية grid-column-gap يمكنك استخدامها لإضافة هامش بين الأعمدة.
• الخاصية gap يمكنك استخدامها لإضافة هامش بين الأسطر و الأعمدة.

في المثال التالي قمنا باستخدام الخاصية grid-row-gap لإضافة هامش بمقدار 10 بكسل بين الأسطر.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 10px;
}

في المثال التالي قمنا باستخدام الخاصية grid-column-gap لإضافة هامش بمقدار 10 بكسل بين الأعمدة.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
}

في المثال التالي قمنا باستخدام الخاصية grid-gap لإضافة هامش بمقدار 10 بكسل بين الأسطر و الأعمدة.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
}

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

يمكنك استخدام الخاصية grid-template-areas لتقسيم الحاوية إلى مناطق مع إعطاء كل منطقة منها إسم محدد.
بعدها يجب إضافة الخاصية grid-area لكل عنصر في الحاوية و إعطائه إسم المنطقة التي نريد وضعه فيها كقيمة.

كيفية تسمية المناطق

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

grid-template-areas:
    "header header"
    "navbar main"
    "navbar footer";

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

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

.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar footer";
}

.header {
    grid-area: header;
}

.navbar {
    grid-area: navbar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

في المثال التالي قمنا بتقسيم الحاوية إلى مناطق، بعدها قمنا بإضافة هامش بمقدار 10 بكسل بين الأسطر و الأعمدة، و من ثم قمنا بجعل حجم العمود الأول 150 بكسل و العمود الثاني يظهر على كل المساحة المتاحة.

.grid-container {
    display: grid;
    grid-gap: 10px;
    grid-auto-columns: 150px auto;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar footer";
}

الخاصية grid-template

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

• grid-template-areas
• grid-template-columns
• grid-template-rows

في المثال التالي قمنا بتقسيم الحاوية إلى مناطق مع تحديد أن عرض العمود الأول هو 150 بكسل و العمود الثاني يظهر على كل المساحة المتاحة. كما أن أننا وضعنا هامش بمقدار 10 بكسل بين الأعمدة و الأسطر.

.grid-container {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "header header"
        "navbar main"
        "navbar footer"
        / 150px auto;
}

في المثال التالي قمنا بإعادة المثال السابق مع جعل السطر الأول طوله 90 بكسل، السطر الثاني مطابق لحجم الشاشة و السطر الثالث 50 بكسل.

.grid-container {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "header header" 90px
        "navbar main" 1fr
        "navbar footer" 50px
        / 150px auto;
}