It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little.
My brain still reaches for flexbox in that situation, and with gap, it probably will continue to do so. It’s worth noting though that grid can do the same thing in its own special way.
Like this:
.grid {
display: grid;
gap: 1rem;
grid-auto-flow: column;
}They all look equal width there, but that’s only because there is no content in them. With content, you’ll see the boxes start pushing on each other based on the natural width of that content. If you need to exert some control, you can always set width / min-width / max-width on the elements that fall into those columns — or, set them with grid-template-columns but without setting the actual number of columns, then letting the min-content dictate the width.
.grid {
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}Flexible grids are the coolest.
Another thought… if you only want the whole grid itself to be as wide as the content (i.e. less than 100% or auto, if need be) then be aware that display: inline-grid; is a thing.
Yes this is the major and fundamental flaw of CSS grid.regilar CSS columns function do this job but the problem with this is that the browser calculate vertically than horizontally.Have you got solution for this.
CSS Columns are derived from print so they do what columns do for centuries — more or less successful. Since CSS Regions are no longer a thing it’s the only available layout mode where content will gradually flow from one “layout area” into another, aka fragmentation.
Flexbox and Grid can do columns too, but different. Here fragmentation is applied on the element level so the “flow” is rather coarse.
If you don’t want Grid to auto create new columns for your, then tell it so and declare the amount and size[s] as you have to with CSS Columns and it’ll act accordingly (plus: the columns can have individual widths.)
Columns, Flexbox and Grid use differrent paradigms for different layout needs and they all have their strength and weaknesses. They’re not mutally exclusive! A clever combination of the three may eventually give you the layout you’re aiming for, for the particular content you have.
Maybe Houdini will come to your (our) rescue once it’s widely supported.
Sadly CSS grid fractions are not really useable at all in real world examples. E.g. if you have one section with “grid-template-columns: 2fr 1fr;” and another section with “grid-template-columns: 1fr 1fr 1fr;” those colunms will NOT align if grid-gap is greater than zero. This is essential for creating a real, bootstrap-like grid.
You could try playing with borders of the elements inside of the main grid container… however fractions really needs this buff to became a real alternative.
If they are of the same width, either by parent container or not, they should align. Fractions, afaik, simply splits procentually. So 1fr in 30px would be 10px.
I could be wrong, I’m a novice. But I created quite a few grids, sub-grids and parallel grids, and aligned them successfully (after some extensive novice effort, though).
Well they’re clearly in separate grids, so why would you expect them to align?
In this case you should be using a grid element spanning multiple columns. To have them really align, they should be separate rows in the same grid, so they have the same column template.
FR represents one fraction of the remaining available space and NOT necessarily a specific width of the container’s overall width: if only a single columns overflows due to a large image of extra long word the fr value shrinks.
Besides: the sum of the gaps between three columns (2 * gap) is of course larger than the width of a single gap. So whatever remains from the container’s initial “100%” width after all gap widths are subtracted is distributed between the ‘fr’ tracks/columns. In your quasi 3-column scenario they behave the same as percentages — and there gutters wouldn’t line up either.
To get an equal distribution of columns you should declare them as such: “grid-template-columns: repeat(12, 1fr)” and let individual grid items span tracks/columns as needed. That’s how gaps are not accounted for and your items and columns lign up properly. You’re likely to end up with much less markup and CSS if you drop the Bootsrap/Foundation layout paradigm.
.cols-12 {display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem}
.span-2 {grid-column:span 2}
.span-3 {grid-column:span 3}
.full {grid-column:1/-1}
Bootstrap “grids” face the same issue but compensate using bizzare percentage values to define the column widths for all sorts of containers or use negative margins. And a gazillion utility classes to push things around “on” their grid.
Does this code not work for anyone else?
Both Firefox and Chrome are throwing an invalid property error, and it doesn’t appear to be doing what the article suggests it should. I can’t work out what’s wrong about it though…
Codepen: https://codepen.io/jparks/pen/dyYEpPz.
Try something like 150px instead of min-content.