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
0
votes
3 answers

Why are my columns' contents starting at different heights?

I read that one should not use tables as means of layout, but do all the styling with CSS, so I tried the most basic thing I can think of to mimic tables, by using CSS multi-column layout. I have created a CodePen to illustrate the problem. As you…
InDaPond
  • 574
  • 3
  • 6
  • 23
0
votes
3 answers

Looking to have 3 columns across 2 rows with the content only being images

I've been trying to create a column that has a 3 across the top by two rows down. So far I've only been able to create the first row but I don't know how to break it onto the second row. .container { display: flex; justify-content: space…
user10680092
0
votes
2 answers

multiple columns inside a grid element

.grid { display: grid; grid-template-columns: 1fr 99px; background: silver; height: 100vh; } .gridleft { column-count: 4; background: lightblue; overflow-y: scroll; } .title { background: lightblue; height:…
user7461846
0
votes
1 answer

CSS multicolumn avoid breaks

I'm trying to create a multi column layout with css where I have a few items with headings between them. I tried to use break-after: avoid to prevent headings from being at the bottom of a column but it doesn't seem to work Here's a snippet that…
Eschon
  • 538
  • 7
  • 26
0
votes
1 answer

Column-count and page-break

Currently I am working on my development-server (http://52.57.22.230/) on a new menu (click under "Programme" right under the logo an the top left). Chrome behaves different than other browsers. I use column-count: 5 for this size and set…
manuelJoaquim
  • 49
  • 1
  • 1
  • 8
0
votes
1 answer

four elements distributing strangly in 3 column container - css columns

I am having an interesting issue. When I have the following code (snippet) I see this: I would like to see: It only seems to happen when I have four items, three items occupy three columns, and 5 also fill out all three columns. Is this possible…
WillD
  • 5,170
  • 6
  • 27
  • 56
0
votes
1 answer

Safari: :before-element in column-count on wrong positon (bug?)

I found a weird behaviour in Safari and now I'm not sure whether it's a bug or if I'm missing something. When I split multiple paragraphs in a container into two columns (with the help of column-count) and additionally give those elements an…
TiPE
  • 412
  • 1
  • 3
  • 9
0
votes
2 answers

Split div into multiple columns without breaking child elements

I want to use CSS Columns for a website sitemap. The issue I'm having is that the sections that are encapsulated in divs are being split across columns. What I actually want is shown below, where every child element is forced to be in a separate…
David Wheatley
  • 426
  • 6
  • 16
0
votes
1 answer

How do I get my columns to balance evenly?

The columns don't seem to balance (lines per column not

per column) out correctly. Have tried column-fill: balance with no joy. As you can see from the image. There is 1 paragraph on the right with 3 on the left. .col { …
Tom Pumford
  • 49
  • 1
  • 9
0
votes
1 answer

How to stop columns splitting individual elements

I'm trying to use css columns and grid to get a variable column table. I need the columns to be in the same multiples (ex. 3, 6, 9). With chrome however it splits right in the middle of elements like label, input, span, etc. I can't have half a…
John
  • 523
  • 3
  • 12
0
votes
2 answers

Minimum two rows using column-width with inline-blocks

I'm trying to separate inline-blocks into columns, starting with one item in each column. Instead, it's giving me two blocks in a column initially. What can I do to alter the behavior? http://jsfiddle.net/fuqrwe64/10/