Consider data has 20 records and for a certain screen size 8 rows will fit and for another screen size only six rows will fit. So as per screen height automatically loading number of rows can be easily achieved with css grid (ref-- Make grid container fill columns not rows). But my requirement is to add header for each column. How can this be achieved ?
Image One
Image Two
I haven't used this myself, but it looks like you could use grid-template-areas
Here's the example they use:
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
One (hacky) alternative would be to just use a separate grid with a single row right above the current grid.
