تسلط بر طرح‌بندی‌های واکنش‌گرا: دستیابی به طرح‌های پیچیده با شبکه CSS

ایجاد طرح‌بندی‌های واکنش‌گرا یک چالش رایج برای توسعه‌دهندگان وب است. در این وبلاگ، چگونگی دستیابی به یک طراحی واکنش‌گرای خاص با استفاده از تکنیک‌های مختلف CSS را بررسی می‌کنیم، با تمرکز بر این که چرا CSS Grid بهترین رویکرد برای این طرح‌بندی خاص است.

چالش

ما باید یک طرح ایجاد کنیم که در آن:

نمای دسکتاپ:

• DIV 1 و DIV 3 به صورت عمودی در سمت چپ قرار دهید، هر کدام 50 درصد از ستون سمت چپ را می گیرند.
• DIV 2 تمام ارتفاع ستون سمت راست را می گیرد.

نمایش موبایل:

• هر سه div به صورت عمودی جمع می شوند.

چرا Flexbox کوتاه می شود؟

Flexbox برای چیدمان های یک بعدی عالی است اما با چیدمان های پیچیده دو بعدی مانند ما مشکل دارد. در اینجا دلیل آن است:

 
 class="container">
   
 class="item">DIV 1
   
 class="item">DIV 2
   
 class="item">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

در این تنظیمات فلکس باکس:

• DIV 2 نمی تواند به طور خودکار ارتفاع خود را برای مطابقت با ارتفاع ترکیبی تنظیم کند DIV 1 و DIV 3.
• Flexbox در درجه اول برای چیدمان های یک بعدی (اعم از ردیف یا ستون) است، نه آرایش های پیچیده دو بعدی.

راه حل شبکه CSS

CSS Grid در ایجاد طرح‌بندی‌های دو بعدی برتری دارد و آن را برای این چالش عالی می‌کند.

 
 class="container">
   
 class="item">DIV 1
   
 class="item">DIV 2
   
 class="item">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 برای طرح بندی های پاسخگو خود لذت ببرید!