Fixed gap between CSS columns

Question

I'm trying to create flowing content using CSS columns, but I'm running into the problem where gaps between columns readjust when I resize the browser window horizontally. Is there any way to make the column gaps fixed? It seems like the column-gap CSS property only allows you to set a minimum column gap, and as the viewport is expanded, the gaps increase proportionally.

Here's the CSS I have right now:

column-gap: 5px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-width: 240px;
-moz-column-width: 240px;
-webkit-column-width: 240px;

and then I have divs inside that are fixed width and have display: inline-block.

EDIT: Here's a sample jsFiddle with the appropriate HTML/CSS: http://jsfiddle.net/4cqbr/1/. I'm trying to create a sideways-scrolling collection of posts that are fixed width, variable height. When you resize the 'Result' area, you can see that the column gap expands and contracts.

You can now accomplish this using CSS grid, see answer [here](https://stackoverflow.com/a/65599310/2223706). — Garrett, Jan 07 '21 at 00:32

score 4 · Accepted Answer · answered Feb 02 '12 at 01:19

4

The column gap is only changing sizes because you set a hard width on the columns. You can't have a fluid layout with all hard set widths, something has to be fluid.

Here is an example with fluid columns and consistent gaps.

p{
  column-width: 240px;
  column-gap: 2em;            
  padding: 5px; 
  text-align:justify;
}

answered Feb 02 '12 at 01:19

bookcasey

39,223
13
77
94

2

I don't get why it shouldn't be possbile. With the height, gap and column width fixed, there is still the total width of all columns needed flexible. Maybe one ahs to scroll, but that's what I would expect from what Adi tried to do. – ThisWillDoIt Jul 01 '14 at 19:24
Right, instead of adding more column gap space, it should just left-align the columns instead of "justfying" them. – Garrett Jan 06 '21 at 14:53

Fixed gap between CSS columns

1 Answers1

Linked