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

Why is break-after: page; ignored inside CSS columns?

Let's say I have this code:
...
...
with this CSS: .chapter { …
Florian
  • 3,145
  • 1
  • 27
  • 38
0
votes
1 answer

Apply CSS for a specific field on Formstack

I was trying to span the checkbox field in 3 columns on this form - https://learningcurve.formstack.com/forms/list_of_banks\ So, I wrote .fsBody .fsForm .fsFieldCell { column-count:3; } But it spans all the similar fields into 3 columns. I need…
Tanmoy Dewanjee
  • 1
0
votes
1 answer

CSS column bug fix or alternative

Due to Chrome (and other Blink browsers) having a bug where only the first 500 columns are painted i need either a fix/hack, or an alternative solution. See bug here (there is 509 pages - not 500): https://codepen.io/anon/pen/pLxozK /* codepen link…
mvp
  • 40
  • 1
  • 6
0
votes
0 answers

Two column layout wrapping around (floated?) div

I'm trying to achieve the following layout, where the section on the left is two columns and wraps around a floated element on the top right. The solution I encountered works on Chrome but not Safari. Does anyone have suggestions on how to…
Waverly
  • 61
  • 2
  • 7
0
votes
1 answer

Safari: CSS Multi-column hover bug with absolute position?

I have the following easy CSS Multi-column layout: ul { column-count: 3; } li { display: block; position: relative; } .hover { background-color: rgba(0, 0, 0, .5); bottom: 0; color: #fff; left: 0; overflow:…
KittMedia
  • 7,368
  • 13
  • 34
  • 38
0
votes
1 answer

CSS transforms within CSS columns disappear (Chrome)

I've come across what may just be a bug in Chrome, but I'm hoping to get another set of eyes on this, and hopefully tell me if I'm missing something here. The issue: I have some
  • tags that are spread over three CSS columns (column-count: 3), and…
    • Andrew Rubin
    • 210
    • 2
    • 9
    0
    votes
    1 answer

    Is there a way to sort children into columns depending on the class of the children?

    Let's say that I have the following HTML code.
    1
    2
    jscul
    • 748
    • 1
    • 10
    • 25
    0
    votes
    1 answer

    Videos in CSS columns not arranging correctly

    I have a 3-column layout which I want populated with a variable number of videos (usually a multiple of 3). I'd like the videos to distribute themselves across the columns in such a way that each column is of equal height. This isn't a problem if…
    diplodorkus
    • 170
    • 2
    • 14
    0
    votes
    1 answer

    Masonry Grid Layout CSS

    I'm trying to create a layout that is 3 columns and each column should only be able to have 2 groups of elements of any size. The groups of items should flow into the next column top to bottom I not familiar with the limitations of css grids. Is…
    visualbam
    • 167
    • 15
    0
    votes
    0 answers

    flexbox column layout responsive with column reorder without fixed height

    I'm trying to accomplish this with flexbox => desktop : | | | block 1 | | block 2 | | | | block 3 | mobile : block 1 block 2 block 3 I came to this .cont { display: flex; flex-direction: column; flew-wrap:…
    Cyril CHAPON
    • 3,556
    • 4
    • 22
    • 40
    0
    votes
    0 answers

    How to make auto adjustable blocks with fixed columns using CSS

    For my Todo application, I want to display auto adjustable blocks as like Google Keep. I've looked into this post How to accomplish something like Google Keep layout. It works fine with the images but not the text content which is coupled with…
    nmkyuppie
    • 1,456
    • 1
    • 14
    • 30
    0
    votes
    2 answers

    Masonry effect - How can I change the order of the blocks?

    I use the columns (for effect masonry), with the order of location being - top down 1 3 5 2 4 6 * { box-sizing: border-box; } .columns { columns: 3; } .columns-item { background: #ccc; width: 100%; margin: 0 0 10px; …
    Dmitriy
    • 4,475
    • 3
    • 29
    • 37
    0
    votes
    3 answers

    Image on the top of a multi-column layout with CSS

    I have a two column layout (using the CSS multi-column layout module) and I'd like to have an image at the top of the second column. It seems like I have to place the image myself so that it's in the place in the text where the break will be. The…
    Nicklas Ansman
    • 121
    • 3
    • 10
    0
    votes
    1 answer

    How can I keep my column-count column sorting when adding new elements?

    I have a page with a "load more" feature. I use the column-count CSS property to divide it into two columns. When I click to load more, the first 4 divs change sorting and they all are in the first column. Check the drawing below or…
    Filip
    • 95
    • 10
    0
    votes
    1 answer

    column-count and position fixed on Microsoft Edge

    On a current project I have a similar structure (here I have very simplified the structure): http://jsfiddle.net/6j5ouhz4/3/ HTML
    OPEN…
    AntonioC
    • 1
    • 1
    1 2 3
    …
    22 23