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
9
votes
2 answers

Can flex items wrap in a container with dynamic height?

I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar…
italiansoda
  • 462
  • 8
  • 12
9
votes
4 answers

Why is z-index not working with CSS columns in Chrome?

I am having a problem with the z-index of my multi-column layout created with column-count. I want to move the clicked div on top of the list with .animate(), but when I am clicking an element on the right column it goes behind the elements of the…
Marsotir
  • 101
  • 5
8
votes
5 answers

CSS column-count not respected

There's a similar question here with no real answer: CSS columns bug — 5 column count only showing 4 (with images) I'm using column-count to display elements in columns (in this case a set of section elements but this happens regardless of the…
powerbuoy
  • 12,460
  • 7
  • 48
  • 78
8
votes
5 answers

How to break the newspaper style 3 column layout in CSS?

I have a following requirement to design the print layout to generate a pdf and I've tried various options including CSS flex and grid but not much success. The requirement is: Show the content in 3-page colum layout - similar to newspaper…
Vijin Paulraj
  • 4,469
  • 5
  • 39
  • 54
8
votes
2 answers

How can I insert column break in a CSS multi-column layout?

I'm trying to implement a mega-menu. The number of menu items is variable. By default, they have to be rendered in 4 columns, balanced (the number of items on each column should be nearly the same as the other columns). The height of the mega-menu…
andreivictor
  • 7,628
  • 3
  • 48
  • 75
8
votes
3 answers

css columns: last column is not filled

I am trying to use column-count css property to render divs in 4 columns. But when there are 3n items (3, 6, 9...) in columns wrapper, only three columns get filled, and fourth column is empty! CSS: .columns { -webkit-column-count: 4; /*…
cronfy
  • 1,001
  • 1
  • 15
  • 32
8
votes
3 answers

Splitting list of items in two columns with CSS

I have a list of items (fetched from CMS) whose number is unknown. I need to display this list in two columns of roughly equal number of items. The following code works but I explain below why it's problematical:
  • content
    • …
drake035
  • 3,955
  • 41
  • 119
  • 229
8
votes
1 answer

How to move list-items to a new column if they extend past the height of the container?

I have a list where I'd like to build two columns from. The list can have a variable amount of items in it, but a max. of 8 I always want the first column to have 4 elements. I already tried column-count: 2 but this does not work fine on an uneven…
xhallix
  • 2,919
  • 5
  • 37
  • 55
8
votes
2 answers

image always in the top right corner of the second column in 2 multi-columns div

I have a div with column-count: 2. I have also an img inside of it. I would like to see this image always in the top right corner of the second column. How can I achieve this? I know I can use position: absolute for the img, but then the text is not…
suz
  • 737
  • 2
  • 9
  • 22
8
votes
2 answers

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

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…
natsturner
  • 143
  • 2
  • 5
7
votes
2 answers

Wrong scroll bar when using column-count (CSS/HTML)

When using column-count: 2, if there is overflow, I want a vertical scroll bar to appear, but a horizontal one appears instead. Without column-count, the vertical scroll bar appears, as expected. How can I use column-count: 2 and have the vertical…
birdus
  • 7,062
  • 17
  • 59
  • 89
7
votes
1 answer

CSS columns break elements apart in Chrome even with break-inside:avoid;

One issue with Flexbox is that the entire row's height changes to match the biggest element in it, thus not achieving a Masonry-type layout. I am currently trying to use Semantic UI's card views together with CSS columns instead of their cards class…
GPinskiy
  • 307
  • 1
  • 6
  • 20
7
votes
0 answers

How to emulate CSS column-count in React-Native?

With CSS columns, you can wrap images and divs across multiple columns. For example, if you set up a CSS file like this: html, body { height: 100%; } body { overflow: hidden; margin: 0; background-color: orange; } #master-container…
MHz
  • 358
  • 1
  • 2
  • 10
7
votes
3 answers

CSS columns, odd offset depending on height

I've run into a very odd behaviour regarding CSS column layout which only appears in Chrome. Depending on the overall height of the item being columnized its left offset is shifted which makes it hard to determine an items actual location. The…
Dadgron
  • 131
  • 1
  • 8
7
votes
5 answers

CSS Multi Column Layout Margin Issue

I have a css based 2 column layout... .mainContentSection { font-size: 1.1em; margin: 20px 10px 10px; padding: 0; -moz-column-count: 2; /* Firefox */ -webkit-column-count: 2; /* Safari and Chrome */ column-count: 2; …
John
  • 137
  • 2
  • 9
1 2
3
…
22 23