Создание сетки с фиксированной высотой строки / счетчика столбцов с помощью CSS-сетки

Question

Я пытаюсь создать следующий макет с сеткой CSS:

То, что я пробовал до сих пор, выглядит следующим образом:

.grid {
    padding: 16px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 200px);
}

img {
    height: 100%;
    width: auto;
}

но у меня проблемы с динамическим подсчетом столбцов. Разве это невозможно вообще?

Answer 1

Сетка CSS не очень подходит для макета, который вы хотите. К счастью, вы можете использовать flexbox для достижения чего-то похожего:

.grid {
    display: flex;
    flex-wrap: wrap;
}

img {
    flex: 1;
    height: 200px; /* or whatever fixed height you need */
    max-width: 100%;
    object-fit: cover;
}

Вот кодекс: https://codepen.io/wiiiiilllllll/pen/ZRMxpo