17

I have a CSS grid layout where I have the top row spanning the entire grid using the grid-column property.

Does anyone know how I can set this row to be 100px high and have all the subsequent rows set to a grid-auto-rows height of 200px?

I know I can input individual values with grid-template-rows for all the specific rows, but there are going to be a lot of divs on the page and don't want to input 100px and then a load of 200px values using this grid-template-rows property.

I'm thinking there must be a way to set individual pixel values on certain rows and then have everything else as grid-auto-rows?

I can't seem to find how to do this in the docs.

Any help would be awesome!

https://codepen.io/emilychews/pen/dZPJGQ

.gridwrapper {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-auto-rows: 200px;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

nav {
  background: yellow;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

nav {
  grid-column: 1 / -1;
}

/*MAKE DIVS 1FR ON MOBILE*/
@media only screen and (max-width: 736px) {
  .gridwrapper {
    grid-template-columns: 1fr;
  }
}
<div class="gridwrapper">
  <nav class="grid">1</nav>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
</div>

2 Answers 2

32

Does anyone know how I can set this row to be 100px high and have all the subsequent rows set to a grid-auto-rows height of 200px?

Yes. Grid can do this cleanly and easily.

First, you don't need to set a height value on the grid item itself. That overrides one of the great benefits of CSS Grid: the ability to control the dimensions of grid items at the container level.

You know that your grid will always have at least one row: the top row. That's your explicit grid.

You don't know how many additional rows there will be. That number is variable and unpredictable. That's your implicit grid.

The grid-template-rows and grid-template-columns properties set track sizes in the explicit grid.

The grid-auto-rows and grid-auto-columns properties set track sizes in the implicit grid.

Therefore, this is probably what you're looking for:

.gridwrapper{
    display: grid;
    grid-template-rows: 100px; /* top row is 100px in height */
    grid-auto-rows: 200px;     /* any new rows created are 200px in height */
}

revised codepen

2
  • 3
    How can I alter this to also manually set the grid row height of the second row?
    – blankface
    Aug 3, 2018 at 3:43
  • 3
    @ZeroDarkThirty: grid-template-rows: 100px 150px; /* top row is 100px in height, 2nd row 150px */ grid-auto-rows: 200px; /* any new rows created are 200px in height */
    – Ganske
    Aug 9, 2019 at 5:59
4

You can use grid-template-rows property.

I guess you are looking for something like this:

https://codepen.io/harora/pen/EbaQxr

Here is a nice reference to the Grid model: Grid Model Explained

3
  • I never realised you could use grid-auto-rows and grid-template-rows together. Thanks for this! It was driving me mad.
    – pjk_ok
    Oct 30, 2017 at 14:38
  • 3
    Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes
    – Paulie_D
    Oct 30, 2017 at 15:20
  • Maybe I'm missing something, but the "class=grid" used in the HTML does not appear in the CSS.
    – Mark
    Mar 31, 2022 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.