Сделать div в виде сетки?

Question

[▪ ▪]

Привет. Никак не могу определиться как сделать блок с информацией в ячейках. Их будет 3 блока. В каждом темном квадрате я хочу разместить текст. Конечно можно использовать скрипт галереи в таком же стиле, но она уже используется. Может быть можно как то в css сделать? Чтобы эта сетка могла масштабироваться.

ps сейчас вижу только грубый вариант — сделать эти блоки в абсолютной позиции и для каждого widht 50%, так как если сделать position relative, float:left,right, тогда при масштабировании они начнут наезжать друг на друга из-за чего один будет уходить под другой.

Answer 1

[Андрей]

что тут может выезжать наезжать? https://jsfiddle.net/fyzh4hdb/

Comments

[▪ ▪]

Хорошая альтернатива если не использовать flexbox.

Answer 2

[devstudent]

с чего бы им наезжать? родителю позишн релатив, ширина 100%, им тоже позишн релатив, ширина 33% (если три штуки будет) + флоат.

Comments

[▪ ▪]

из за этих float и width 50% , при изменении размера браузера, правый блок уходит под левый (хотя если делать position absolut он просто его перекрывает). Из за этого приходится постоянно делать media, а это гемор. Я же ищю более простой способ, и кажется его нашел.

[devstudent]

какой еще абсолют? а без медиаквери сейчас никуда все равно, ели под телефон делать ...

[▪ ▪]

devstudent: да но тогда придется этих медиа сделать целую кучу, так как браузер будет менять размер окна в реальном времени. Абсолют это единственный способ сделать так чтобы блоки не уходили друг под друга.

[devstudent]

Рикко: codepen.io/anon/pen/EKvwbq вроде так

Answer 3

[Pshkll]

isotope.metafizzy.co
masonry.desandro.com

Comments

[▪ ▪]

только не скрипты.

[▪ ▪]

кажется лучше использовать flex в css3

[Pshkll]

Рикко: если проигнорировать поддержку браузерами, тогда да.

Answer 4

[Web Developer Blog]

Как вариант несколько блоков использовать