Как сделать такую сетку

[chocolate_moles]

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

Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками

[chocolate_moles]

2 часа назад, AlexZaw сказал:

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

https://jsfiddle.net/skdxch2m/

[AbaGardon]

28 минут назад, chocolate_moles сказал:

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

Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками

Float & Flex ? 320px это мобильная 992px desctop или общая ширина сайта должна быть 1312px ?

[chocolate_moles]

3 минуты назад, AbaGardon сказал:

Float & Flex ? 320px это мобильная 992px desctop или общая ширина сайта должна быть 1312px ?

float flex grid table, все что пожелаете, только без скриптов.

320 и 992 это для примера, ширина вообще не важна

Задача превратить столбик из разноцветных кубиков слева, в плитку из тех же самых кубиков справа. Или наоборот

 

[AlexZaw]

Разбейте на две колонки на широком экране, и всех делов.

[chocolate_moles]

6 часов назад, AlexZaw сказал:

Разбейте на две колонки на широком экране, и всех делов.

Спасибо, все оказалось действительно так просто, а я столько времени потратил на анимацию, кубики нарисовал, в разный цвет покрасил, цифры поставил.

[AlexZaw]

4 часа назад, chocolate_moles сказал:

Спасибо, все оказалось действительно так просто, а я столько времени потратил на анимацию, кубики нарисовал, в разный цвет покрасил, цифры поставил.

Странно, а какого решения вы ждете с учетом того что js использовать нельзя? Тем более что другого варианта все равно нет - либо две колонки ( если порядок на мобильном не важен), либо гриды. И будет вам счастье, - и блоки будут от высоты не зависеть, и перестроить их в одну колонку на мобильном можно...А то что вы время на анимацию тратили и все остальное, так это ваше дело...

Или вы хотите что-бы за вас все сделали? Тогда, извините, вам в другой раздел...

[mrnobody]

11 часов назад, AlexZaw сказал:

либо гриды.

блин, ппробовал на гридах сделать — не получилось. Думал поможет свойство `grid-auto-flow: dense;` - не помогло ((. 

[AlexZaw]

11 часов назад, chocolate_moles сказал:

https://jsfiddle.net/skdxch2m/

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

ps.только наблюдается один забавный эффект, если убрать фон у блоков 1-3, и назначить фон для блока 4, то у всех блоков будет фон четвертого блока, так как он растягивается на весь контейнер,  так что решение хоть и неплохое, но с глюками

[chocolate_moles]

16 часов назад, AlexZaw сказал:

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

ps.только наблюдается один забавный эффект, если убрать фон у блоков 1-3, и назначить фон для блока 4, то у всех блоков будет фон четвертого блока, так как он растягивается на весь контейнер,  так что решение хоть и неплохое, но с глюками

Так не надо задавать фон для этого блока, он является лишь элементом сетки, а для фона и собственно самого контента есть вложенный div

[AlexZaw]

7 часов назад, chocolate_moles сказал:

Так не надо задавать фон для этого блока, он является лишь элементом сетки, а для фона и собственно самого контента есть вложенный div

Да это понятно, просто указал на такое поведение. Причем если с шириной все понятно, то откуда берется высота не совсем ясно

[chocolate_moles]

5 минут назад, AlexZaw сказал:

Да это понятно, просто указал на такое поведение. Причем если с шириной все понятно, то откуда берется высота не совсем ясно

[SelenIT]

Высота берется из особенностей работы блочного контекста форматирования. Блочные боксы без clear идут друг за другом, разделенные лишь «схлопнутыми» margin-ами, а float-ы проходят сквозь них, расталкивая их содержимое. Поэтому 2-й плавающий блок не выталкивает сам 4-й блок вниз, а накладывается на него. Но если добавить 4-му блоку clear: right, то он перестанет включать в себя высоту 2-го блока (и 2-й блок не будет накладываться на его вложенный блок, так что можно будет убрать у последнего display:inline-block и width).

Edited October 21, 2018 by SelenIT
был перепутан 2-й блок с 3-м

[AlexZaw]

35 минут назад, SelenIT сказал:

Поэтому 3-й плавающий блок не выталкивает сам 4-й блок вниз, а накладывается на него.

Почему третий блок накладывается на 4 понятно. Почему растягивается контейнер тоже понятно. Непонятно почему четвертый блок растягивается по высоте на весь контейнер(включая блоки 1 и 2), когда, по логике, он должен быть по высоте контента и вообще вести себя так как будто рядом никого нет.

[SelenIT]

Упс, имел в виду 2-й блок, а написал 3-й (смотрел на сетку на флоатах, а думал про сетку на колонках, видимо). Приношу извинения!

Второй блок (плавающий) накладывается на 4-й и выталкивает его контент вниз (под себя), поэтому общая высота 4-го блока складывается из высоты 2-го + высота контента 4-го + его отступы. 1-й и 3-й плавающие блоки накладываются на padding 4-го и не пересекаются с его контентом, поэтому на его высоту не влияют.

[AlexZaw]

1 час назад, SelenIT сказал:

Второй блок (плавающий) накладывается на 4-й и выталкивает его контент вниз (под себя)

Блин, точно, в блоках же есть инлайновый контент! Четвертый блок остается на месте, а выталкивается его контент, так как он то "знает" про обтекание.Спасибо! Вот что значит давно не работать с float - все забывается.