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

Flexbox layout not compatible with grid-column-gap in Safari

In Elementor I am using the Social Icons component (Multi-column layout) nesting it inside a Section's Column (Flexbox layout). However, Safari is not able to determine its position accurately because the CSS property --grid-column-gap is not…
Peter G.
  • 7,816
  • 20
  • 80
  • 154
-1
votes
1 answer

CSS Columns Layout (flexbox, float, columns)

I am struggling to achieve the following layout as shown in the screenshot: This is part of a filters section in a page, that opens up after clicking the button for that filter that triggers it. The part that has bugged me, is the columns…
Sbpro
  • 948
  • 14
  • 27
-1
votes
2 answers

CSS columns have a horizontal gap?

I am having some issue trying to align css columns and a grid. Do css columns have some horizontal gap by default? If so, how to configure it?
TVBZ
  • 564
  • 1
  • 4
  • 15
-1
votes
1 answer

Move elements to new column if height is reached

I have a four level menu, and on level3 and level4 I want to use 4 columns. When the first column height is reached from level4 items, elements show on the next column. 
https://jsfiddle.net/nbastreet/Lc9w2nqk/5/
I tried to use flex…
Ali
  • 135
  • 10
-1
votes
1 answer

How to make custom columns css?

With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css? I need to do something like this: I repeat... Whithout using bootstrap, w3 or any other css…
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56
-1
votes
2 answers

Place list items in two rows with 50% shift

I am trying to place list items in two rows so that items from the bottom row are shifted 50% to the right. The order of the items also matters and should be like on the image below: Below is the code I've come up with:…
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
-1
votes
1 answer

Style column-span seems not to work in tables

I want to avoid using colspan and rather go for CSS. In here it's suggested that I can use column-span. It's well-documented in many blogs etc. However, entering it to my code, renders the td over one column only. I also get a weird error message…
user1675891
-1
votes
1 answer

Can I make a CSS-only masonry layout?

First of all: yes this question is similar to Vertical vs. Horizontal Masonry CSS-only But as nobody has yet answered this question, I'm gonna give it another try. I have set up a masonry layout for my WordPress posts using the CSS columns property.…
Rico Ocepek
  • 767
  • 6
  • 20
-1
votes
1 answer

How to get 100% height column with CSS?

I would like to get 100% height columns with text but it appears that it never fills the bottom of the div. HTML :

Alii nullo quaerente vultus severitate adsimulata patrimonia sua in…

Guillaume
  • 342
  • 1
  • 9
  • 23
-2
votes
1 answer

Force images distribution across CSS columns in Chrome

I have the following snippet which creates a nice image "grid" using CSS columns. .gallery { columns: 4; column-gap: 5px; } .gallery-item { display: inline-block; vertical-align: top; position: relative; } .gallery-item >…
MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
-3
votes
2 answers

Is there such a thing as a clear both for CSS column styling?

I have a parent element and it has column-count: 2 and i want the last p element in this container to take up the entire width of the parent container. But the column-count: 2 forces the last p element to appear in the 2nd column. See here:…
Patoshi パトシ
  • 21,707
  • 5
  • 29
  • 47
-5
votes
4 answers

Converting DIV-like page into blog-like layout within CSS?

This is my HTML page: https://jsfiddle.net/62czmtvt/2/ (to actually see the HTML page working) Code from JSFiddle: :root { background-color: #FFFACD; } div.infoguide { width: 240px; font-family: Arial, sans-serif; font-size:…
avenas8808
  • 1,639
  • 3
  • 20
  • 33
1 2 3
…
22
23