CODEWITHSUNDEEP
csscss-grid
Kolyo Peev
Kolyo Peev

Reputation: 203

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

Upvotes: 0

Views: 41

Answers (2)

user14550434
user14550434

Reputation:

If I understand correct, you want a grid looking like this:

      +=====+=====+=====+=====+=====+=====+=====+
72px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |

... auto-fill times

So do this:

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272909

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;
}

Upvotes: 1

Related Questions