Установка высоты ячеек по их максимальному значению в ряду (таблица на дивах)

Question

У меня возникла определённая проблема при решении задачи. Хочу спросить можно ли решить проблему средствами HTML&CSS, без прибегания к использованию JS.

Суть задачи в том, что бы сделать некую таблицу, которая должна быть сделана с помощью div. Должно быть 8 столбцов, в каждом столбце есть 5 ячеек, в которых есть текст. Это должно работать так же на телефонах, путем перенесения столбцов вниз.

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

У меня не получается средствами CSS добиться одинаковой высоты ячеек в каждом ряду.

Приведу пример на цифрах, каждая цифра – это высота конкретной ячейки
130 106 171 130 130
107 106 134 130 130
100 103 146 160 130

Хочу добиться результата:
171 171 171 171 171
134 134 134 134 134
160 160 160 160 160

Если что, задачу я решил, и проблему решил с помощью JS, но это не совсем приветливое к телефонам решение, так как высота ячеек устанавливается в пикселях. Хочу сделать это (если это возможно) с помощью CSS.

Вот как это выглядит:

Вот как это должно выглядеть:

Вот собственно исходники HTML и CSS:

HTML (убрал один столбец, т.к. StackOverflow кричит что больше 30к знаков нельзя):

<section id="teamStatus">
    <div class="mainDivTeamStatus">
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p> Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum Dolor Sit Amet</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                    <div class="isDoing">
                        *иконка*
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                    <div class="isDoing">
                        *иконка*

                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>ОченьБольшоеИмя ИНевероятноОгромнаяФималия</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                    <div class="isDoing">
                        *иконка*

                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                    <div class="isDoing">
                        *иконка*

                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="someTeammateStatus">
            <div class="nameTeammate">
                <p>Иван Павлов</p>
            </div>
            <div class="listLastFiveTasks">
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                    <div class="isDoing">
                        *иконка*

                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <div class="taskName">
                        <p>Robienie strony - Team Status</p>
                    </div>
                    <div class="projectData">
                        <span></span>
                        <div>
                            <p>Timer</p>
                            <p>Temp Temp Temp Temp Temp</p>
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

CSS:

* {
    margin: 0;
    padding: 0;
}

.mainDivTeamStatus {
    display: flex;
    position: absolute;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
}

.someTeammateStatus {
    padding: 10px;
    padding-bottom: 0;
    flex-grow: 1;
    border-left: 1px solid #000;
    flex-shrink: 1;
    width: 12.5em;
}

.someTeammateStatus:first-of-type {
    border: none;
}

.nameTeammate {
    margin-bottom: 6px;
}

.nameTeammate p {
    font-weight: bold;
    font-size: 18px;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.task span {
    width: 45px;
    height: 45px;
    fill: green;
    margin: 0 auto;
    display: block;
}

.task {
    border-bottom: 1px solid silver;
    padding-bottom: 5px;
    padding-top: 5px;
}

.projectData {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
}

.projectData span {
    border-radius: 50%;
    background-color: #008cff;
    width: 15px;
    height: 15px;
    position: relative;
    margin: 5px;
    transform: translate(0, 100%);
}

.projectData div {
    height: max-content;
    margin: auto 0;
}

.projectData p {
    font-size: 14px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

Answer 1

Если на css, как вариант использовать display: grid

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block {
  border: 1px solid #f00;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 8), 1fr));
}

.block__item--head {
  background-color: #f7f7f7;
}

.block__item--head,
.block__item {
  border: 1px solid #ccc;
  padding: .5rem;
}


/* 1 column */

.block__item:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(5) {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(6) {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
}


/* 2 column */

.block__item:nth-of-type(7) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(8) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(9) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(10) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(11) {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(12) {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
}


/* 3 column */

.block__item:nth-of-type(13) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(14) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(15) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(16) {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(17) {
  grid-column: 3 / 4;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(18) {
  grid-column: 3 / 4;
  grid-row: 6 / 7;
}


/* 4 column */

.block__item:nth-of-type(19) {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(20) {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(21) {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(22) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(23) {
  grid-column: 4 / 5;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(24) {
  grid-column: 4 / 5;
  grid-row: 6 / 7;
}


/* 5 column */

.block__item:nth-of-type(25) {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(26) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(27) {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(28) {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(29) {
  grid-column: 5 / 6;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(30) {
  grid-column: 5 / 6;
  grid-row: 6 / 7;
}


/* 6 column */

.block__item:nth-of-type(31) {
  grid-column: 6 / 7;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(32) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(33) {
  grid-column: 6 / 7;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(34) {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(35) {
  grid-column: 6 / 7;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(36) {
  grid-column: 6 / 7;
  grid-row: 6 / 7;
}


/* 7 column */

.block__item:nth-of-type(37) {
  grid-column: 7 / 8;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(38) {
  grid-column: 7 / 8;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(39) {
  grid-column: 7 / 8;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(40) {
  grid-column: 7 / 8;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(41) {
  grid-column: 7 / 8;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(42) {
  grid-column: 7 / 8;
  grid-row: 6 / 7;
}


/* 8 column */

.block__item:nth-of-type(43) {
  grid-column: 8 / 9;
  grid-row: 1 / 2;
}

.block__item:nth-of-type(44) {
  grid-column: 8 / 9;
  grid-row: 2 / 3;
}

.block__item:nth-of-type(45) {
  grid-column: 8 / 9;
  grid-row: 3 / 4;
}

.block__item:nth-of-type(46) {
  grid-column: 8 / 9;
  grid-row: 4 / 5;
}

.block__item:nth-of-type(47) {
  grid-column: 8 / 9;
  grid-row: 5 / 6;
}

.block__item:nth-of-type(48) {
  grid-column: 8 / 9;
  grid-row: 6 / 7;
}

@media (max-width:1440px) {
  .block {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% / 4), 1fr));
  }
  /* 5 column */
  .block__item:nth-of-type(25) {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
  .block__item:nth-of-type(26) {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
  }
  .block__item:nth-of-type(27) {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }
  .block__item:nth-of-type(28) {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
  }
  .block__item:nth-of-type(29) {
    grid-column: 1 / 2;
    grid-row: 11 / 12;
  }
  .block__item:nth-of-type(30) {
    grid-column: 1 / 2;
    grid-row: 12 / 13;
  }
  /* 6 column */
  .block__item:nth-of-type(31) {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
  }
  .block__item:nth-of-type(32) {
    grid-column: 2 / 3;
    grid-row: 8 / 9;
  }
  .block__item:nth-of-type(33) {
    grid-column: 2 / 3;
    grid-row: 9 / 10;
  }
  .block__item:nth-of-type(34) {
    grid-column: 2 / 3;
    grid-row: 10 / 11;
  }
  .block__item:nth-of-type(35) {
    grid-column: 2 / 3;
    grid-row: 11 / 12;
  }
  .block__item:nth-of-type(36) {
    grid-column: 2 / 3;
    grid-row: 12 / 13;
  }
  /* 7 column */
  .block__item:nth-of-type(37) {
    grid-column: 3 / 4;
    grid-row: 7 / 8;
  }
  .block__item:nth-of-type(38) {
    grid-column: 3 / 4;
    grid-row: 8 / 9;
  }
  .block__item:nth-of-type(39) {
    grid-column: 3 / 4;
    grid-row: 9 / 10;
  }
  .block__item:nth-of-type(40) {
    grid-column: 3 / 4;
    grid-row: 10 / 11;
  }
  .block__item:nth-of-type(41) {
    grid-column: 3 / 4;
    grid-row: 11 / 12;
  }
  .block__item:nth-of-type(42) {
    grid-column: 3 / 4;
    grid-row: 12 / 13;
  }
  /* 8 column */
  .block__item:nth-of-type(43) {
    grid-column: 4 / 5;
    grid-row: 7 / 8;
  }
  .block__item:nth-of-type(44) {
    grid-column: 4 / 5;
    grid-row: 8 / 9;
  }
  .block__item:nth-of-type(45) {
    grid-column: 4 / 5;
    grid-row: 9 / 10;
  }
  .block__item:nth-of-type(46) {
    grid-column: 4 / 5;
    grid-row: 10 / 11;
  }
  .block__item:nth-of-type(47) {
    grid-column: 4 / 5;
    grid-row: 11 / 12;
  }
  .block__item:nth-of-type(48) {
    grid-column: 4 / 5;
    grid-row: 12 / 13;
  }
}

@media (max-width:767px) {
  .block {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
  }
  .block__item:nth-of-type(13),
  .block__item:nth-of-type(14),
  .block__item:nth-of-type(15),
  .block__item:nth-of-type(16),
  .block__item:nth-of-type(17),
  .block__item:nth-of-type(18),
  .block__item:nth-of-type(25),
  .block__item:nth-of-type(26),
  .block__item:nth-of-type(27),
  .block__item:nth-of-type(28),
  .block__item:nth-of-type(29),
  .block__item:nth-of-type(30),
  .block__item:nth-of-type(37),
  .block__item:nth-of-type(38),
  .block__item:nth-of-type(39),
  .block__item:nth-of-type(40),
  .block__item:nth-of-type(41),
  .block__item:nth-of-type(42) {
    grid-column: 1 / 2;
  }
  .block__item:nth-of-type(19),
  .block__item:nth-of-type(20),
  .block__item:nth-of-type(21),
  .block__item:nth-of-type(22),
  .block__item:nth-of-type(23),
  .block__item:nth-of-type(24),
  .block__item:nth-of-type(31),
  .block__item:nth-of-type(32),
  .block__item:nth-of-type(33),
  .block__item:nth-of-type(34),
  .block__item:nth-of-type(35),
  .block__item:nth-of-type(36),
  .block__item:nth-of-type(43),
  .block__item:nth-of-type(44),
  .block__item:nth-of-type(45),
  .block__item:nth-of-type(46),
  .block__item:nth-of-type(47),
  .block__item:nth-of-type(48) {
    grid-column: 2 / 3;
  }
  .block__item:nth-of-type(13),
  .block__item:nth-of-type(19) {
    grid-row: 13 / 14;
  }
  .block__item:nth-of-type(14),
  .block__item:nth-of-type(20) {
    grid-row: 14 / 15;
  }
  .block__item:nth-of-type(15),
  .block__item:nth-of-type(21) {
    grid-row: 15 / 16;
  }
  .block__item:nth-of-type(16),
  .block__item:nth-of-type(22) {
    grid-row: 16 / 17;
  }
  .block__item:nth-of-type(17),
  .block__item:nth-of-type(23) {
    grid-row: 17 / 18;
  }
  .block__item:nth-of-type(18),
  .block__item:nth-of-type(24) {
    grid-row: 18 / 19;
  }
  .block__item:nth-of-type(25),
  .block__item:nth-of-type(31) {
    grid-row: 19 / 20;
  }
  .block__item:nth-of-type(26),
  .block__item:nth-of-type(32) {
    grid-row: 20 / 21;
  }
  .block__item:nth-of-type(27),
  .block__item:nth-of-type(33) {
    grid-row: 21 / 22;
  }
  .block__item:nth-of-type(28),
  .block__item:nth-of-type(34) {
    grid-row: 22 / 23;
  }
  .block__item:nth-of-type(29),
  .block__item:nth-of-type(35) {
    grid-row: 23 / 24;
  }
  .block__item:nth-of-type(30),
  .block__item:nth-of-type(36) {
    grid-row: 24 / 25;
  }
  .block__item:nth-of-type(37),
  .block__item:nth-of-type(43) {
    grid-row: 26 / 27;
  }
  .block__item:nth-of-type(38),
  .block__item:nth-of-type(44) {
    grid-row: 27 / 28;
  }
  .block__item:nth-of-type(39),
  .block__item:nth-of-type(45) {
    grid-row: 28 / 29;
  }
  .block__item:nth-of-type(40),
  .block__item:nth-of-type(46) {
    grid-row: 29 / 30;
  }
  .block__item:nth-of-type(41),
  .block__item:nth-of-type(47) {
    grid-row: 30 / 31;
  }
  .block__item:nth-of-type(42),
  .block__item:nth-of-type(48) {
    grid-row: 31 / 32;
  }
}

<div class="block">
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde veritatis, voluptates animi nostrum optio consequuntur minima eaque deserunt nemo corporis quia est, sunt magni ex illum expedita iure, quo nisi. Modi repellat repellendus obcaecati laboriosam
      quia, officia maiores asperiores nulla aliquid id quam fuga quaerat, sapiente mollitia saepe cupiditate temporibus possimus facilis illo nesciunt nam! Explicabo praesentium animi incidunt expedita. Repellat libero repellendus vero veniam tempore
      voluptatem harum aliquam suscipit blanditiis aspernatur debitis sunt quidem a, earum doloribus, amet commodi consequuntur officiis, laudantium totam officia ullam placeat. Aperiam, atque repellendus. Unde, quisquam quae alias sapiente illo expedita
      beatae? accusamus omnis perspiciatis iusto. Officiis animi aliquid modi culpa qui quas, suscipit sed corrupti cum maxime sapiente dolor? Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit.</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item block__item--head">
    <h2>Title</h2>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem rem quos quaerat quo perferendis? Cupiditate nihil cumque ab, molestiae vel, optio voluptatum, voluptas nobis laboriosam minus obcaecati earum iusto soluta? doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
  <div class="block__item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quam, veniam neque officiis doloremque totam.</p>
  </div>
</div>

БЛОГ НА HUSL

Установка высоты ячеек по их максимальному значению в ряду (таблица на дивах)

Ответы (1 шт):