Trying to get these grid items to flow from column 1 top to bottom then next column 2 top to bottom - and equally distribute the content (which varies) between the two columns, rather than col 1 /left to col 2 right…
When i select auto flow column i lose the grid:
My grid skills are not fully formed! Any help greatly appreciated!
When you set the auto flow to column you have to specify a template for the rows.
Thanks aslotta - but i’m not sure what to add there to recreate the two column layout?
The number of rows is content dependant (varies) - the number of columns should always be 2
Hi Peter,
Welcome to the forum!
Without knowing the amount of content, what you have in mind is as far as I can see impossible to achieve (or very difficult) with CSS grid.
If there are not enough rows, the grid will automatically add more columns.
Hi Timmse
Thanks for the welcome and your response - yeah i think i’m asking for the impossible!
I tried and older method which seems to work!
root{
-moz-column-count: 2;
-moz-column-gap: 1.5rem;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 1.5rem;
-webkit-column-rule: none;
column-count: 2;
column-gap: 1.5rem;
column-rule: none;
}