cssgrid-ama icon indicating copy to clipboard operation
cssgrid-ama copied to clipboard

Leave a column blank?

Open marybaum opened this issue 7 years ago • 0 comments

Is it possible to skip a row or a column (leaving it blank) but auto-flow a set of grid items?

Here is a typical use case. It's a category archive of WordPress posts, with an intro div that's basically one more post, as far as the DOM is concerned.

The names are in their own containing div so I can flow them in as many columns as it takes to keep them all above the fold. (And to overcome column-span not working in Firefox.)

I know I can declare

{grid-template-columns: 1fr 4fr;}

and the intro div will go nicely into

{grid-column: 2;}

and so will each plaque.

I could write a theme hook to wrap the plaques in a div that would go into {grid-column:2;} and then flow on a nested grid.

Aaaaaand--not every 57-year-old messing with CSS can, or will have the freedom to, pop open that hood, I mean bonnet, 😉 and muck about.

I could also just set a margin, or padding, or declare the .content class a flex element -- but can we do this in Grid?

marybaum avatar Feb 02 '18 18:02 marybaum