4

I want to create masonry layout using css only, i read all tutorial in internet, but they using column property to divide layout, the problem in here is the layout will be display like this (with 1,2,3...is a items).

1|3|5
2|4|6

I want my layout must be:

1|2|3
4|5|6

I want use css only.Please tell me if you have any solution or idea to resolve this problem.

Xuân Hiển Ngô
  • 139
  • 1
  • 10
  • 1
    Masonry is built on Javascript, as it detects positions and puts everything with position absolute. CSS can't detect positions, but you can use `@media queries` and `position:abolute`. – Daan May 23 '16 at 07:33
  • @DaanHeskes Using css is impossible, right?, So could you please give me some example ? – Xuân Hiển Ngô May 23 '16 at 07:39
  • Definitely not Impossible, but not automatically aligning etc. That's what Javascript does. You can `position:absolute` everything and set the `top` and `left` offsets. Then change for smaller/bigger screens with CSS3 Media Queries. – Daan May 23 '16 at 12:22
  • Okey,thanks for help @DaanHeskes – Xuân Hiển Ngô May 24 '16 at 02:54
  • haven't tried it but perhaps with flexbox, using flex-direction and flex-wrap. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for documentation. – Wim Mertens Jul 13 '16 at 02:36

1 Answers1

0

You can use flexbox. See codepen for example, and complete guide to flex box to learn more.

In order to keep the layout horizontal, adjust the flex-direction to your liking.

Libi
  • 53
  • 3