Создание адаптивных макетов — обычная задача для веб-разработчиков. В этом блоге мы рассмотрим, как добиться конкретного адаптивного дизайна с использованием различных методов CSS, сосредоточив внимание на том, почему CSS Grid является лучшим подходом для этого конкретного макета.

Вызов

Нам нужно создать макет, в котором:

Вид рабочего стола:

• DIV 1 и DIV 3 располагаются вертикально слева, каждый занимает 50 % левого столбца.
• DIV 2 занимает всю высоту правого столбца.

Мобильная версия:

• Все три элемента div располагаются вертикально.

Почему 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

В этой настройке флексбокса:

• DIV 2 не может автоматически регулировать свою высоту, чтобы она соответствовала общей высоте DIV 1 и DIV 3.
• Flexbox в первую очередь предназначен для одномерных макетов (строки или столбцы), а не для сложных двумерных компоновок.

Решение CSS Grid

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 для своих адаптивных макетов!