Как создать сетку, в которой блоки в одной строке имеют разную высоту?

Question

EtherealJester

css , css-grid

Как создать сетку, в которой блоки в одной строке имеют разную высоту?

Как мне добиться следующего результата: <br/>

1 декабря 2024 г. 20:03

Ответы на вопрос 5

Похожие вопросы

Answer 1

Чтобы создать сетку, в которой блоки в одной строке имеют разную высоту, вы можете использовать CSS Flexbox или CSS Grid. Ниже приведу примеры с обоими подходами.

### Использование Flexbox

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Grid</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* расстояние между блоками */
        }
        .block {
            background-color: lightblue;
            flex: 1 1 200px; /* измените значение, чтобы настроить ширину блока */
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
        .tall {
            height: 150px;
        }
        .short {
            height: 100px;
        }
        .medium {
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block tall">Блок 1</div>
        <div class="block short">Блок 2</div>
        <div class="block medium">Блок 3</div>
        <div class="block tall">Блок 4</div>
        <div class="block short">Блок 5</div>
    </div>
</body>
</html>
```

### Использование CSS Grid

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* автоматическое заполнение колонок */
            gap: 10px; /* расстояние между блоками */
        }
        .block {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
        .tall {
            height: 150px;
        }
        .short {
            height: 100px;
        }
        .medium {
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block tall">Блок 1</div>
        <div class="block short">Блок 2</div>
        <div class="block medium">Блок 3</div>
        <div class="block tall">Блок 4</div>
        <div class="block short">Блок 5</div>
    </div>
</body>
</html>
```

### Объяснение:
1. **Flexbox**:
   - Контейнер с классом `.container` использует `display: flex` и `flex-wrap: wrap`, чтобы позволяло блокам переноситься на новую строку.
   - Каждый блок имеет индивидуально заданную высоту через классы `.tall`, `.short`, и `.medium`.
   
2. **CSS Grid**:
   - Контейнер с классом `.container` использует `display: grid` и `grid-template-columns`, чтобы создать адаптивную сетку.
   - Блоки занимают заданные высоты с помощью CSS классов.

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

Answer 2

полноценно пока никак, даже спецификация нативного masonry не готова, но какие-то реализации есть в браузерах за флагами 
 остаётся только: 
 1) хаками с прибитыми гвоздями высотами элементов в строках грида 
 2) через js библиотеки 
 3) через columns: 2; на контейнер и break-inside: avoid; на элементы, но порядок элементов будет другой

Answer 3

Так понимаю, тебе в этом направлении 
 https://www.freecodecamp.org/news/how-to-create-a-...

Answer 4

изучай 
 HTML 
 <div class="wrap">
        <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3"></div>
        <div class="item item-4"></div>
      </div>
 
 
 css 
 .wrap{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 20px 100px;
    height: 500px;
    gap: 5px;
}

.item-1 {
    background-color: aqua;
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
}

.item-2 {
    background-color: rgb(26, 141, 72);
    width: 100%;
    height: 100%;
    grid-row: 1 / 3;
}
.item-3 {
    background-color: blueviolet;
    width: 100%;
    height: 100%;
    grid-row: 2 / 4;
}
.item-4 {
    background-color: rgb(188, 104, 24);
    width: 100%;
    height: 100%;
    grid-row: 3 / 4;
}

Answer 5

Масонри эфект средствами html и css 
 https://www.smashingmagazine.com/2020/11/native-cs...