Stack Overflow
Stack Overflow

Questions tagged [css-multicolumn-layout]

The Multi-Column Layout module in CSS allow users to layout their content in a column format, based on a number of different properties.

The Multi-Column Layout module in CSS allows users to layout their content in a column format, based on a number of different properties.

This includes setting a column count or a column height, to automatically split content to fit, as well as setting a column gap, to control spacing, and more.

Read the W3C Specification:
https://www.w3.org/TR/css3-multicol/

Read the guide on MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

344 questions
342
votes
19 answers

How to prevent column break within an element?

Consider the following HTML:
  • Number one
  • Number two
  • Number three
  • Number four is a bit longer
  • Number five
and the following…
Timwi
  • 65,159
  • 33
  • 165
  • 230
306
votes
19 answers

How to display an unordered list in two columns?

With the following HTML, what is the easiest method to display the list as two columns?
  • A
  • B
  • C
  • D
  • E
Desired display: A B C D E The solution needs to work with Internet…
atp03
  • 3,539
  • 3
  • 17
  • 20
76
votes
8 answers

flow 2 columns of text automatically with CSS

I have the code similar to the following:

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5.…

Joe Mastey
  • 26,809
  • 13
  • 80
  • 104
64
votes
12 answers

CSS multi-column layout of list items doesn't align properly in Chrome

I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome. The menu is relatively simple: an unordered list…
Ben D
  • 845
  • 1
  • 7
  • 9
60
votes
3 answers

How can I create multi columns from a single unordered list?

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/ No problem when using a different list for each column:
  • item1
  • item2
  • item3
  • item4
  • item5
    • …
Sempervivum
  • 928
  • 1
  • 9
  • 21
50
votes
5 answers

Change the direction flow of CSS columns

So I have CSS like this: #blogPosts{ -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; column-count: 3; column-gap: 10px; width: 100%; } and this creates 3 columns perfectly…
maxisme
  • 3,974
  • 9
  • 47
  • 97
41
votes
8 answers

How to create a multi-column list?

I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much. How can I get the UL to show like this: 1. 6. 11. 2. 7. 12. 3. 8. …
anonymous
  • 2,294
  • 5
  • 23
  • 27
41
votes
6 answers

CSS columns with left-right flow

Let's say I have a div which will contain a set of elements (divs), which may have different heights, but all of them will have the same width. I've achieved this currently with isotope + masonry, but since some browsers already support CSS3…
ismriv
  • 933
  • 1
  • 10
  • 20
31
votes
3 answers

Bootstrap 4 masonry layout utilizing flexbox grid

Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It seems to me that all of the columns are equal height.
Anthony Russo
  • 913
  • 4
  • 13
  • 31
30
votes
2 answers

Why doesn't min-content work with auto-fill or auto-fit?

Basically, I do not understand why this works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } But this doesn't work: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I really wish to…
timetowonder
  • 5,121
  • 5
  • 34
  • 48
29
votes
5 answers

Can I order my CSS columns horizontally instead of vertically?

Here is my code: .column { column-count: 4; column-gap: 10px; -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; }
Alan Yong
  • 993
  • 2
  • 12
  • 25
28
votes
4 answers

When using column-count, overflowing content completely disappears in all but first column, why?

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one. Here is my example:…
Szabolcs
  • 1,463
  • 2
  • 12
  • 20
23
votes
3 answers

Is there a way to specify different widths for columns in CSS3?

I would like to use CSS to present a two-column layout. The markup I am using is this
Joe Morris
  • 831
  • 1
  • 8
  • 14
18
votes
7 answers

Can I set a column break in a CSS multicolumn layout?

I have a big paragraph of text flowing into a CSS multicolumn layout stretching, say, two, three, or four columns using CSS hyphening. At some point, one of the column's text needs to be ended earlier in order to allow the rest of the paragraph to…
Sam
  • 15,254
  • 25
  • 90
  • 145
17
votes
7 answers

Column-count is not working in Chrome

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome. Tested with Chrome 55.0.2883.95 (64-bit) Any help would be greatly appreciated. #people{ -webkit-column-count:4; …
Federico
  • 1,392
  • 1
  • 17
  • 40
1
2 3
…
22 23