Search code examples
csscss-grid

CSS Grid Template Columns: Height is not set for item

I have the following CSS Grid container:

.project-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 518px));
  gap: 15px 15px;
}

I thought that with minmax(215px, 518px) it will set an item of 215px height and 518px height.

But what happens is that 518px is set to width but the height is 160px and not 215px.

What do I have to set, to have a fixed height for each item? When I set grid-template-rows: 215px; only the first row is effected.

Solution

  • I thought that with minmax(215px, 518px) it will set an item of 215px height and 518px height.

    These are the values of grid-template-columns, so you're setting widths, not heights.

    What do I have to set, to have a fixed height for each item? When I set grid-template-rows: 215px; only the first row is effected.

    Use grid-auto-rows: 215px. This sets the height of all undefined rows to 215px height.