I would like to achieve the following layout for a footer using grid:
Elements should be placed in fixed-width columns (2, 3 or 4 columns depending on current viewport width). Elements should be filled from left-to-right and top-to-bottom (see numbers). I set a maximum height for the grid wrapper so columns should contain as much elements vertically as fits into its height.
This is not equivalent with masonry layout, where elements are filled from left to right.
I've tried this:
.wrapper {
display: grid;
grid-auto-flow: column;
gap: 10px;
}
but I cannot achieve to flow elements under each other.