Как сделать двухколончатую таблицу на css grid

20.08.2020

Периодически нужен блок, который на больших экранах выглядит как таблица с несколькими колонками, а на экранах с маленьким разрешением как одна колонка.

Ниже будет пример того, как такое можно сделать с использованием css grid.

Также стоит ознакомиться с записью css grid адаптивная верстка без медиа запросов

Вот как, наш пример, будет выглядеть на большом разрешении:

А так, если экран меньше заданной границы:

Можно посмотреть в живую.

И собственно сам код:

 
<div class="grid">

    <div class="img">
        <img src="https://fakeimg.pl/100x100/ff0000,128/000,255" alt="img">
    </div>
    <div class="text">
        <p>
            <b>Всё онлайн</b>
        </p>
        <p>
            Не надо никуда ходить и ждать курьера. Пара минут на анкету, ещё пара на решение.
        </p>
    </div>

</div>

 
/*
    Тестовое оформление
*/

.grid {
    border: 20px solid green;
    width: 1000px;
    margin: 0 auto;
}

.grid > div {
    border-top: 1px red solid;
    border-bottom: 1px red solid;
}

/*
    Функционал
*/

.grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-row-gap: 20px;
}

.grid > div {
    display: grid;
    place-content: center;
    margin-left: 10px;
}

.grid > div:nth-of-type(even) {
    justify-content: start;
}

.grid img {
    display: block;
    max-width: 100%;
}

/*
    Пример вертикального отображения
*/
@media (max-width: 960px ) {
    .grid {
        width: auto;
        grid-template-columns: 1fr;
    }

    .grid > div:nth-of-type(even) {
        /*justify-content: center;*/
        text-align: center;
    }
}

Готовый результат, можно скачать архивом.

Категории: Web, CSS

Пометки: Как сделать двухколончатую таблицу на css grid, css grid таблица

Как сделать двухколончатую таблицу на css grid

Связанные материалы: