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

Как мне добиться следующего результата: <br/>
  • 1 декабря 2024 г. 20:03
Ответы на вопрос 5 
Чтобы создать сетку, в которой блоки в одной строке имеют разную высоту, вы можете использовать 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 классов.

Оба подхода позволяют динамически создавать сетки с блоками различной высоты, и вы можете выбрать тот, который вам более удобен для вашего проекта.
полноценно пока никак, даже спецификация нативного masonry не готова, но какие-то реализации есть в браузерах за флагами <br/> остаётся только: <br/> 1) хаками с прибитыми гвоздями высотами элементов в строках грида <br/> 2) через js библиотеки <br/> 3) через <code>columns: 2;</code> на контейнер и <code>break-inside: avoid;</code> на элементы, но порядок элементов будет другой
Так понимаю, тебе в этом направлении <br/> <a href="https://www.freecodecamp.org/news/how-to-create-a-mansory-layout-using-html-and-css/" rel="nofollow">https://www.freecodecamp.org/news/how-to-create-a-...</a>
изучай <br/> HTML <br/> <pre><code class="html">&lt;div class="wrap"&gt;
        &lt;div class="item item-1"&gt;&lt;/div&gt;
        &lt;div class="item item-2"&gt;&lt;/div&gt;
        &lt;div class="item item-3"&gt;&lt;/div&gt;
        &lt;div class="item item-4"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre> <br/> <br/> css <br/> <pre><code class="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;
}</code></pre>
Масонри эфект средствами html и css <br/> <a href="https://www.smashingmagazine.com/2020/11/native-css-masonry-layout-css-grid/" rel="nofollow">https://www.smashingmagazine.com/2020/11/native-cs...</a>
Похожие вопросы
    Показать ещё