With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

Question

I'm using the column-count property to set a page with multiple divs at three columns, which looks great on larger screens. Each div has a fixed width of, say, 500px (contained images).

When working on smaller screens however, the browser tries to force the content within the original \three columns when it should go to two columns. Is there a preferred best method to have the content go to two columns when the content starts to overlap?

Use a media query to change the column count property? – Paulie_D Oct 08 '13 at 17:25 — Paulie_D, Oct 08 '13 at 17:25

score 13 · Accepted Answer · answered Oct 08 '13 at 17:26

13

If you use the column-width property, rather than column-count, the browser will automatically adjust the number of columns as needed to fill the available space.

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}

answered Oct 08 '13 at 17:26

cimmanon

67,211
17
165
171

This is awesome...exactly what I needed...however...is there anyway I can have the columns list left to right instead of top-down...for second item would be in the second column...??? – Alex.Barylski Oct 29 '14 at 13:27
3

@Alex.Barylski No. The multi-column module is intended to be used to create newspaper/magazine style columns, which flow top/down. Flexbox can flow left/right or right/left (or top/down or bottom/up), but you're not 100% guaranteed to have perfect "columns" (read: it's not a grid system). – cimmanon Oct 29 '14 at 13:35
1

So I would have to resort to javascript or similar to render such a layout? – Alex.Barylski Oct 29 '14 at 13:38
Exactly what I needed, thanks! – Bojan Krkic Sep 22 '21 at 17:39

score 2 · Answer 2 · answered Oct 08 '13 at 17:27

2

@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}

answered Oct 08 '13 at 17:27

Paulie_D

107,962
13
142
161

With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

2 Answers2

Linked