Search code examples
csscss-grid

Expandable css grid with defined row heights

I am trying to make a grid that has 7 columns and expands with as many rows needed (supplied by backend). So my css is like so:

.doctor-shedule__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 248px));
  grid-auto-rows: 72px repeat(auto-fill,86px);
  gap: 8px;
}

what I am trying to achieve is a grid that has a defined smaller first row of 72px and then all other rows should be 86px... but it just doesn't work is there a workaround fot such a case? Using the above snippet makes my third row 73.23px

Solution

  • do like below:

    .doctor-shedule__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 248px));
  grid-template-rows: 72px ; /* first row */
  grid-auto-rows:86px; /* all the other rows */
  gap: 8px;
}