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

How can I swap columns and rows in a CSS multicolumn layout?

I need to fill up the grid with blocks via CSS or JS. My current code: .vacancies { -webkit-column-count: 5; -webkit-column-gap: 10px; -moz-column-count: 5; -moz-column-gap: 10px; column-count: 5; column-gap: 10px; …
Dan
  • 36
  • 1
0
votes
1 answer

CSS: how to organize two columns in a way that one column overlays above the other?

I would like to have a page split in two columns, one of which should overlay over the other one. I haven't been able to do this, so I ask you guys for help. Please ignore the messy svg code, it was copied from inkscape because I wanted to have some…
Bogdan Prădatu
  • 325
  • 5
  • 15
0
votes
2 answers

CSS column count and css transform

I am using column count and I have div above which holds a text that animates from bottom on hover. The problem it doesnt behave as it should on all items. .container { column-count: 3; column-gap: 0; position: relative; } .item { …
Toniq
  • 4,492
  • 12
  • 50
  • 109
0
votes
2 answers

CSS how can I keep text from overlapping in columns?

I have long labels for each check box. Is there a way to make the overflow hidden or clipped? I even tried changing styling the labels (background color of the text), but it only partially works (overlap shows when the rows are slightly…
user3283304
  • 149
  • 1
  • 2
  • 14
0
votes
1 answer

Why does my CSS column-span element not respect margin-bottom of blocks in the columns above?

I have a multi-column div with paragraphs, and I need the last paragraph in any cluster of paragraphs to end with a space at the bottom. Currently, I achieve this with a margin-bottom on p and then an equal negative margin-top on p+p. This all works…
Trevor Buckner
  • 588
  • 2
  • 13
0
votes
1 answer

CSS display list in columns

I have a list which is made by Vue.js Here is my code:
0
votes
1 answer

Can I control column breaks in an HTML list that uses multicolumn CSS?

What I have is one HTML semantic list spanning three columns via CSS: ul {column-count: 3;} What I want to do is to control where the list items (the
  • elements) break across the columns. It happens to be an alphabetized list, so instead of,…
    • Tinfoil Hat
    • 101
    • 3
    0
    votes
    1 answer

    Aligning list items

    I have a two-column-list that looks like this I need the list items of the second column to always align to the right border of the list but not text-align right, but like this: so the item with the longest word is actually text-aligned to the…
    rogerk
    • 43
    • 5
    0
    votes
    0 answers

    Flex - fixed number of items on row with equal space between while keeping original ratio

    Assuming this HTML
    Some
    Something
    A
    Something longer
    B
    jave.web
    • 13,880
    • 12
    • 91
    • 125
    0
    votes
    0 answers

    How to simulate column-count CSS 3 property with CSS 2 engine?

    I have to make an html document to be rendered as PDF, and the engine only supports CSS 2.1. A big part of the text should be displayed on 2 columns, which is well achieved with column-count: 2. Unfortunately this property is not understood by the…
    Emmanuel BRUNO
    • 125
    • 11
    0
    votes
    1 answer

    overflow-y css property causes content in right column to disappear on some iPads on Safari

    I have a layout which contains 2 columns. Everything worked fine on various desktop browsers, however recently we discovered an issue with some iPads where the right column is not showing at all. It seems to be just on random iPads, as we bought 2…
    DB at PS
    • 111
    • 11
    0
    votes
    1 answer

    How to create columned view in HTML where objects are arranged horizontally not vertically?

    I created a columned view using the CSS column-count property. When set to column-count: 3, my page content is displayed as 3 separate columns with no extra vertical space - elements are vertically-continuous, there is no extra vertical space or a…
    Panpaper
    • 451
    • 1
    • 6
    • 16
    0
    votes
    0 answers

    Handling column breaks in multi column layout

    Background I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS…
    Kolyunya
    • 5,973
    • 7
    • 46
    • 81
    0
    votes
    1 answer

    How to create variable columns and fill them up?

    I have a list of items I'd like to have in columns next to each other. I don't know how many items there will be so I can't have a fixed height. I want them to fill the space a good as possible like so: #parent { background-color: firebrick; …
    leonheess
    • 16,068
    • 14
    • 77
    • 112
    0
    votes
    2 answers

    CSS multicolumn layout overlaps in mobile view

    I have used a 12 column format. (refer the web view image) there are two divs marked in yellow and red each has a width of 50% each. I have coded it in such a way that when the device width has reduced the width of each divs will be set to 100% so…
    Obito Uchiha
    • 113
    • 1
    • 8
    1 2 3
    …
    22 23