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

التحدي

نحن بحاجة إلى إنشاء تخطيط حيث:

عرض سطح المكتب:

• يتم تكديس DIV 1 وDIV 3 عموديًا على اليسار، حيث يأخذ كل منهما 50% من العمود الأيسر.
• DIV 2 يشغل الارتفاع الكامل للعمود الأيمن.

عرض الجوال:

• جميع الأقسام الثلاثة مكدسة عموديًا.

لماذا يفشل Flexbox

يعد Flexbox ممتازًا للتخطيطات أحادية البعد ولكنه يواجه صعوبات مع التخطيطات المعقدة ثنائية الأبعاد مثل تخطيطاتنا. وإليكم السبب:

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

مشاكل متعلقة بـ Flexbox

في إعداد flexbox هذا:

• لا يمكن لـ DIV 2 ضبط ارتفاعه تلقائيًا ليتوافق مع الارتفاع المدمج لـ DIV 1 وDIV 3.
• Flexbox مخصص في المقام الأول للتخطيطات أحادية البعد (إما الصف أو العمود)، وليس الترتيبات المعقدة ثنائية الأبعاد.

حل شبكة CSS

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

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

توضيح

تخطيط الشبكة:

• يحدد شبكة ذات عمودين وصفين.
• المواضع DIV 1 في العمود الأول والصف الأول.
• المواضع DIV 2 في العمود الثاني، ممتدة على صفين.
• المواضع DIV 3 في العمود الأول والصف الثاني.

تصميم سريع الاستجابة:

• بالنسبة للشاشات بحجم 768 بكسل أو أقل، يتحول التخطيط إلى مرن، مما يؤدي إلى تكديس العناصر عموديًا.

خاتمة

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

لا تتردد في تعديل هذا المثال ليناسب مشاريعك الخاصة، والاستمتاع بفوائد استخدام CSS Grid لتخطيطاتك سريعة الاستجابة!