شرح خاصية CSS Grid لتصميم الشبكات

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

ما هي CSS Grid؟

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

كيفية استخدام CSS Grid في CSS

لإعداد Grid Layout، يجب عليك تحديد الحاوية كـ "حاوية Grid" باستخدام الخاصية display: grid;. بعد ذلك، يمكنك تحديد عدد الأعمدة والصفوف باستخدام grid-template-columns و grid-template-rows.

مثال على استخدام CSS Grid

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>تخطيط باستخدام CSS Grid</title>

    <style>

        .grid-container {

            display: grid;

            grid-template-columns: 1fr 1fr 1fr; /* 3 أعمدة */

            grid-gap: 20px; /* المسافة بين العناصر */

        }

        .box {

            background-color: lightgreen;

            padding: 20px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="grid-container">

        <div class="box">عنصر 1</div>

        <div class="box">عنصر 2</div>

        <div class="box">عنصر 3</div>

        <div class="box">عنصر 4</div>

        <div class="box">عنصر 5</div>

        <div class="box">عنصر 6</div>

    </div>

</body>

</html>

التفسير

display: grid;: تحويل الحاوية إلى حاوية Grid ليتم ترتيب العناصر داخلها باستخدام الشبكة.
grid-template-columns: 1fr 1fr 1fr;: تحديد 3 أعمدة متساوية في العرض داخل الحاوية. fr تعني وحدة مرنة، حيث يتم توزيع المساحة المتاحة بين الأعمدة بالتساوي.
grid-gap: 20px;: تحديد المسافة بين الأعمدة والصفوف في الشبكة.

تخصيص الصفوف والأعمدة في Grid

يمكنك تخصيص الصفوف والأعمدة بالشكل الذي يناسب تصميمك. على سبيل المثال، يمكنك تحديد الأعمدة بأحجام مختلفة أو تحديد عدد الصفوف المسموح بها.

مثال على تخصيص الأعمدة والصفوف

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>تخصيص الأعمدة والصفوف في CSS Grid</title>

    <style>

        .grid-container {

            display: grid;

            grid-template-columns: 200px 1fr 200px; /* عمودين ثابتين مع عمود مرن */

            grid-template-rows: auto auto; /* صفين تلقائيين */

            grid-gap: 20px;

        }

        .box {

            background-color: lightcoral;

            padding: 20px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="grid-container">

        <div class="box">عنصر 1</div>

        <div class="box">عنصر 2</div>

        <div class="box">عنصر 3</div>

        <div class="box">عنصر 4</div>

    </div>

</body>

</html>

التفسير

grid-template-columns: 200px 1fr 200px;: تحديد 3 أعمدة: الأول والثالث بعرض ثابت (200px)، والعمود الأوسط مرن (1fr) لملء المساحة المتاحة.
grid-template-rows: auto auto;: تحديد صفين بارتفاع تلقائي استنادًا إلى محتويات العناصر.

التلاعب بالعناصر داخل شبكة CSS

تتيح لك CSS Grid تخصيص كل عنصر داخل الشبكة باستخدام خصائص مثل grid-column و grid-row لتحديد الموضع الذي يجب أن يظهر فيه العنصر ضمن الشبكة.

مثال على تحديد موقع العناصر داخل الشبكة

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>تحديد موقع العناصر في شبكة CSS</title>

    <style>

        .grid-container {

            display: grid;

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

            grid-template-rows: 100px 100px;

            grid-gap: 20px;

        }

        .box1 {

            grid-column: 1 / 3; /* تحديد العنصر ليشغل العمود الأول والثاني */

            grid-row: 1; /* وضع العنصر في الصف الأول */

            background-color: lightblue;

        }

        .box2 {

            grid-column: 3; /* وضع العنصر في العمود الثالث */

            grid-row: 2; /* وضع العنصر في الصف الثاني */

            background-color: lightgreen;

        }

    </style>

</head>

<body>

    <div class="grid-container">

        <div class="box1">عنصر 1</div>

        <div class="box2">عنصر 2</div>

        <div class="box">عنصر 3</div>

    </div>

</body>

</html>

التفسير

grid-column: 1 / 3;: وضع العنصر في العمود الأول والثاني.
grid-row: 1;: وضع العنصر في الصف الأول.
grid-column: 3;: وضع العنصر في العمود الثالث.
grid-row: 2;: وضع العنصر في الصف الثاني.

الخلاصة

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

توب فيديو TV	فيديو نسمات	رابط	رابط
رابط	رابط	رابط	رابط

مدونة التربية والتعليم

القائمة الرئيسية

الصفحات

شرح خاصية CSS Grid لتصميم الشبكات