Реально сверстать такую сетку с одним родителем?

Question

[SuperToster]

<div class="container">
    <div class="item"></div>
    ...
    <div class="item"></div>
</div>

JSFiddle.net/d71hnrt2/

Answer 1

[RAX7]

Еще один вариант. Без фиксированной высоты родителя, но количество дочерних элементов в левой или в правой колонке жестко фиксировано. Возможно разумней было бы не костылить в css nth-child, а навешать классы нужным элементам.

Comments

[SuperToster]

RAX7,
зашевелил старые темы с отрицательными марджинами, клирфиксами, иии.. всё заработало : ) По совокупности работоспособности и поддержки браузерами, решение отличное.

Респект вашим знаниям и умению их применить.

Answer 2

[arsenty]

Если количество контента по высоте в рамках экрана или если нагородить костылей с медиа-запросами, то можно (если очень хочется): https://jsfiddle.net/arsenty/L67cmxtz/

Comments

[SuperToster]

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

Очень много условий при которых такой вариант "помрет" : ( Изменение высоты или количества детей..

В любом случае большое спасибо, пока вы ближе всех к решению : )

Answer 3

[oldkma]

если на флексах то для первой колонки flex-shrink: 0 flex-grow: 0 flex-basis:200px
для колонки на всю ширину flex-grow: 1 - растянет блок на всю оставшуюся ширину
https://codepen.io/oleh-duldiier/pen/XWdQQPX

Comments

[SuperToster]

@oldkma
С двумя колонками вопросов не возникает, для вашего примера даже было бы достаточно

.fixed {
    width: 200px;
}
.rest-width{
    flex: 1;
}

но увы, это не отвечает главному условию задачи — про одного родителя : (

[Сергей delphinpro]

SuperToster, Второй день попадаю на ваш вопрос. И не нахожу решения в данной постановке задачи..

[SuperToster]

Сергей delphinpro,
Ну мы пока сражаемся. В этом смысл данной задачки - в удовольствие поломать себе мозг : ))
arsenty, интересный вариант предложил, но очень ограниченный в возможностях..

[Сергей delphinpro]

SuperToster, ограниченные решения и мне приходили в голову. Но вот чтобы прямо универсально и по ТЗ - что-то никак.

[Ankhena]

Сергей delphinpro, я полночи не спала)))