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
1
vote
1 answer

Problems with CSS multicolumn with tiled background image

I'd like to make a carousel-type scrolling horizontal card view using CSS multicol with column-width, and use a repeating background (such as a white background with a black border) on the element, but I'm having problems. The first problem is the…
Dan Gelder
  • 75
  • 5
1
vote
1 answer

Multi column layout with different column heights

For a printable layout I want to display a dynamic list (coming from an array) that should 'flow' through 4 columns of different heights, to look like this: The blue elements are the four columns with the list (ul) inside. The heights of the blue…
Dominic
  • 440
  • 8
  • 22
1
vote
3 answers

How to vertically align CSS columns content?

I'm trying to build a simple layout with an unordered list, using CSS columns so I can organize its content in two columns if there are too many items in the list, so far I'm able to get this to work like this: .slide { width: 874pt; height:…
IvanS95
  • 5,364
  • 4
  • 24
  • 62
1
vote
2 answers

Is there a way to force one List Item per column using multi-column layout?

I have some simple HTML and CSS to split a list into 4 columns. Instead of the normal behavior where it fits each list item into whichever column has enough space for it, I want to force it to put each list item into its own column. So in my example…
Gavin
  • 7,544
  • 4
  • 52
  • 72
1
vote
0 answers

How to have a child element break out of CSS multicol/columns parent?

The columns multicol attribute is a little underused, but still handy for certain situations where flexbox is less helpful but grid is overkill. Particularly if you want the rows of a column to have arbitrary heights, or in my main case,…
mix3d
  • 4,122
  • 2
  • 25
  • 47
1
vote
2 answers

CSS column-fill auto ignores printed page breaks

The column-fill:auto property works by first populating one full column before going to the next. .two-column { column-count: 2; column-fill: auto; } Chrome does this only correctly on screen, but not when printing and having to deal with page…
svenema
  • 1,766
  • 2
  • 23
  • 45
1
vote
1 answer

Is there a solution for CSS column breaks that works in both Firefox and Chrome

I have three columns. I'm using the approach of a "keep-together" div inside each column to keep my content from breaking where I don't want it to, and forcing a break where I want to. The first column has slightly more content than the other two.…
clayRay
  • 683
  • 1
  • 14
  • 32
1
vote
1 answer

Using CSS columns and making sure the contents of direct children don't wrap

I'm using CSS columns to span menu items across multiple columns, it is working fine for the most part, but my problem is I'm not sure if there is a way to make sure each direct child of the respective parent element with the CSS column code all…
Brett
  • 19,449
  • 54
  • 157
  • 290
1
vote
1 answer

Hidden content distorts column on css multicolumn layout

I'm trying to get a 3 column grid to have the ability for hidden objects to show and expand on the same column without the content moving to the next column or creating white space for the other columns. This is what I have so far, but when you…
Ronnie Wiesenhower
  • 153
  • 6
1
vote
0 answers

How to fix top alignment issue using CSS multi-col layout

I am having issues aligning the top of each column using css multicol. I have tried adding margin-top: 0; to h2 and p tags but that did seem to do it. I have also tried: .col-container > * { -webkit-column-break-inside: avoid; …
whoMe
  • 227
  • 2
  • 13
1
vote
1 answer

Make column heights equal to the smallest column

There a ton of answers on SO on how to make columns equal height based upon the content of the largest column, however I am looking to make all columns equal height based upon the smallest column. In this example, I want all columns to have the…
McLovin
  • 1,455
  • 3
  • 19
  • 37
1
vote
1 answer

chrome css3 multi-column cursor bug

In chrome recent versions, in the case of text inside a contenteditable div, using css3 multi-columnn mode, I am finding the following behaviour: If a

element starts in one column and continues to the following column, the cursor will only be…

dedalus
  • 106
  • 7
1
vote
3 answers

column-count moves part of div to next column

I want to build a 2 column masonry grid. I tried using column-count but if you look at the last grid item - the text is split to the next column for some reason. And when I tried using flex, the items won't align properly in masonry…
Ido Angel-Bohadana
  • 165
  • 10
1
vote
2 answers

How to prevent columned-DIVs from wrapping?

I am trying to have boxes that float/stack themselves off to the right as long as there is room. I came pretty close to what I want, but the DIVs keep getting wrapped over, so that the items lose their heading. .box{ height: additive; …
Omphaloskopie
  • 1,952
  • 1
  • 14
  • 24
1
vote
1 answer

Target a specific column in a CSS Column Layout

In a CSS column layout, I'd need to target first column and its children. With the following CSS code: .multi-column { @media (min-width: 768px) { -webkit-column-count: 2; -webkit-column-gap: 10px; -moz-column-count: 2; …
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
1 2 3
…
22 23