CSS Grid: شرح من البداية

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

مقدمة إلى CSS Grid

تم تقديم CSS Grid لأول مرة في مواصفات CSS Level 3، وهي توفر نظامًا ثنائي الأبعاد لتخطيط العناصر على صفحات الويب. بعكس تقنيات التصميم السابقة مثل Flexbox التي تركز على المحور الواحد (إما عمودي أو أفقي)، فإن CSS Grid يتميز بقدرته على التعامل مع المحورين في نفس الوقت. هذا يعني أنك تستطيع وضع العناصر في صفوف وأعمدة متداخلة، مما يمنحك مرونة أكبر في تصميم الصفحات المعقدة.

لتطبيق CSS Grid، يجب أن تبدأ بتحديد العنصر الأب كشبكة باستخدام الخاصية display: grid;. بعد ذلك، يمكنك تحديد عدد الصفوف والأعمدة باستخدام الخصائص grid-template-rows وgrid-template-columns، وتوزيع العناصر بداخلها.

prompt



    
    
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        .item {
            background-color: #ccc;
            padding: 20px;
            text-align: center;
        }
    


    <div class=\"container\">
        <div class=\"item\">1</div>
        <div class=\"item\">2</div>
        <div class=\"item\">3</div>
        <div class=\"item\">4</div>
        <div class=\"item\">5</div>
        <div class=\"item\">6</div>
    </div>

التحكم في تخطيط العناصر

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

على سبيل المثال، إذا كنت ترغب في أن يمتد عنصر عبر صفين، يمكنك استخدام الخاصية grid-row: span 2;. وبالمثل، يمكنك استخدام grid-column لجعل العنصر يمتد عبر عدة أعمدة.

prompt



    
    
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        .item {
            background-color: #ccc;
            padding: 20px;
            text-align: center;
        }
        .item:nth-child(1) {
            grid-column: span 2;
        }
        .item:nth-child(4) {
            grid-row: span 2;
        }
    


    <div class=\"container\">
        <div class=\"item\">1</div>
        <div class=\"item\">2</div>
        <div class=\"item\">3</div>
        <div class=\"item\">4</div>
        <div class=\"item\">5</div>
        <div class=\"item\">6</div>
    </div>

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