Set a Height Value on an Individual CSS Grid Row

Set a height value on an individual CSS Grid row

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

How to set custom height of one row in grid?

Ok I found solution. When we want to set dynamic height of few divs inside grid container we must use minmax() function.

grid-auto-rows: minmax(50px,auto);

After this we can manually set height of our grid items:

.item {
    height: 320px;
}

Here's working example:
https://codepen.io/freestyle09/pen/YzKrjrx

Thanks to hisbvdis for pointing me a way to find an answer

How do I specify row heights in CSS Grid layout?

One of the Related posts gave me the (simple) answer.

Apparently the auto value on the grid-template-rows property does exactly what I was looking for.

.grid {
    display:grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
    grid-gap:10px;
    height: calc(100vh - 10px);
}

CSS Grid use specific item height as max row height

Use height:0;min-height:100%; on the tabs element. This will make sure the height of the element will not contribute on the size of its track then by adding min-height:100% you force it to use the height of the track defined by other elements:

function toggleTabsContent() { const display = document.querySelector('.content').style.display;  if (display == "none") {   document.querySelector('.content').style.display = "block";  } else {   document.querySelector('.content').style.display = "none";  }}

.grid {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: 1fr auto;  grid-template-areas:    "tabs area"    "footer footer";}
.tabs {  grid-area: tabs;  background: #FF9800;  height:0;  min-height:100%;  overflow:auto;}
.area {  grid-area: area;  height: 200px;  background: #673AB7;}
.footer {  grid-area: footer;  background: #607D8B;  height: 40px;}
.content {  height: 250px;}

<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>
<div class="grid">  <div class="tabs">    <div class="content" style="display: none"></div>  </div>  <div class="area"></div>  <div class="footer"></div></div>

CSS Grid - Auto height rows, sizing to content

You can try minmax(min-content, max-content) ^ref

div {  border: 1px dotted black;}.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-auto-rows: minmax(min-content, max-content);}
.grid-3 {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-auto-rows: minmax(min-content, max-content);}
.left {  background-color: red;} .right {  background-color: green;}

<div class="grid-2">      <div class="grid-2">        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>        <div class="left">L</div>     </div>     <div class="grid-3">         <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>        <div class="right">R</div>     </div></div>

Make CSS Grid row height flexible

It appears, based on what you've written in your question and answer, that you are overlooking an important concept of grid layout (and grids, in general).

A row extends across an entire grid. It's not confined to a single column.

So when you write:

If we had three rows in our right column...

There's no such thing. All rows exist in all columns (and vice versa).

Here's an illustration of your layout from dev tools:

As you can see, all rows extend across all columns.

The height of the third row is set by the content in #one, just as you specified.

The third row in the right column must be the same height as the third row in the left column, because a row can only have one height.

However, you can adjust the size and alignment of grid areas within rows and columns.

align-self: stretch (default value)

align-self: end

align-self: center

align-self: start (what you may be looking for)

section {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: auto auto 1fr;  grid-template-areas:             "one top"            "one center"            "one bottom";  border: 1px solid hotpink;}
article {  border: 1px solid green;}
#one    { grid-area: one;}#top    { grid-area: top;}#center { grid-area: center;}#bottom { grid-area: bottom; align-self: start; background-color: aqua;}

<section>  <article id=one><h1>One</h1><p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin' tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus black. In hac fo shizzle my nizzle check out this dictumst. Black uhuh ... yih!. Mammasay mammasa mamma oo sa tellizzle shiz, pretizzle shiznit, mattizzle fo, gangster vitae, nunc. Get down get down suscipizzle. Own yo' away izzle sed cool.Nullizzle fizzle shut the shizzle up yo mamma orci daahng dawg viverra. Phasellus nizzle shizzle my nizzle crocodizzle. Curabitizzle sure velit vizzle check out this dizzle doggy. Maecenas sapien nulla, iaculis shiz, molestie hizzle, egestas a, erizzle. Shit vitae turpis quizzle nibh bibendizzle boom shackalack. Nizzle pulvinar dope velizzle. Aliquizzle mammasay mammasa mamma oo sa volutpat. Nunc izzle its fo rizzle at lectus pretizzle faucibizzle. We gonna chung nec lacizzle own yo' fizzle pizzle ultricizzle. Ut nisl. Crunk et owned. Integer laoreet ipsum shizzlin dizzle mi. Donizzle at shiz.</p></article>  <article id=top><h1>Top</h1> <p>Just Two Words</p></article>    <article id=center><h1>Center</h1></article>  <article id=bottom><h1>Bottom</h1><p>Help Me! How can I get closer to my Top neighbour?</p></article>  </section>

how to set a max-height for a css grid row

The current grid implementation for minmax is always using the larger value. (See minmax() defaulting to max)

Therefore minmax(0, 40px) will always result in 40px.

CSS have each grid element a different height

The default value of property align-items for a grid container is stretch which means each grid item will extend to the height of the grid row (to the largest item in the row if height is not set using grid-template-rows).

To change this you can just add align-items: flex-start to the grid container (.contentWrapper) - see demo below:

body {  background: #ddd;}
.contentWrapper {  height: 60%;  margin-top: 5%;  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 10px;  /*grid-template-rows: auto;*/  height: auto;  align-items: flex-start; /* ADDED */}
.contentWrapper .box .boxText {  padding: 15px;  height: 25%;  text-align: center;  margin: 0;}
.box {  background: #fff;}
img {  object-fit: cover;  width: 100%;  height: 400px;  margin: 0;}

<div class="contentWrapper">  <div class="box">    <img src="https://via.placeholder.com/400" />    <div class="boxText">Some text here</div>  </div>  <div class="box">    <img src="https://via.placeholder.com/400" />    <div class="boxText">Some text here Some text here Some text here </div>  </div>  <div class="box">    <img src="https://via.placeholder.com/400" />    <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text      here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>  </div></div>

Css Grid - Top row restricted height

Set the wrapper grid-template-rows to auto 100px 100px.

html,body {  font-family: Arial;  margin: 0;  padding: 0;}
.grid {  width: 100vw;  height: 100vh;  background: #333;  display: grid;  grid-template-rows: auto 100px 100px;  grid-template-columns: repeat(4, 90px);  grid-gap: 5px;  justify-content: center;}.grid * {  color: white;  font-size: 120%;  background: rgba(255, 255, 255, 0.3);  display: flex;  align-items: center;  justify-content: center;}.grid .grid-item-1 {  grid-column: 1 / 5;  grid-row: 1;}.grid .grid-item-2,.grid .grid-item-3 {  grid-row: 2;}.grid .grid-item-4,.grid .grid-item-5 {  grid-row: 3;}.grid .grid-item-2,.grid .grid-item-4 {  grid-column: 1 / 3;}.grid .grid-item-3,.grid .grid-item-5 {  grid-column: 3 / 5;}

<div class="grid">  <div class="grid-item-1"></div>  <div class="grid-item-2">about</div>  <div class="grid-item-3">how to</div>  <div class="grid-item-4">list</div>  <div class="grid-item-5">contact us</div></div>

---

Related Topics