CODEWITHSUNDEEP
htmlcss
Freestyle09
Freestyle09

Reputation: 5528

How to set custom height of one row in grid?

I want to set custom height in one specific row in grid gallery view.

.grid-gallery {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: 250px;
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

I have 3 columns and each row (I have dynamic amout of rows) has got 250px height. Now I want to add one div with .grid-title class to have e.g. 100px height and of course this div muse span 3 colums to have 100% width of grid-container.

I have tried something like this but it doesn't change the height of 3 colums. Even with display: grid it's not working too.

.grid-title {
  grid-column: span 3;
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
}

It should looks like this:

enter image description here

EDIT

Working pen:

https://codepen.io/freestyle09/pen/oNvGywK

Upvotes: 1

Views: 6394

Answers (3)

Freestyle09
Freestyle09

Reputation: 5528

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

Upvotes: 4

smnth90
smnth90

Reputation: 828

Define grid template row of your grid container to be 50px which is multiple of both 100 px (grid-title class) and 250px (default row size you needed). Each row will have a height of 50 px as we defined. Now, we can overwrite for independent class with span 2 (ie., 50px * 2) or span 5 (ie., 50px * 5) which will give a height of 100 px and 250 px for those classes. Check mine below CSS properties which will satisfy your conditions.

.grid-gallery {
  max-width: 1000px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 50px;
  grid-auto-flow: dense;
}

.grid-gallery > div{
  background-color: red;
}

.grid-gallery .grid-title {
  background-color: yellow;
  grid-column: span 3;
  grid-row: span 2;
/*  Here some rules  */
}
.image-gallery {
  grid-row: span 5;
}

Upvotes: -1

hisbvdis
hisbvdis

Reputation: 1380

I have 3 columns and each row

If you have fixed amount of columns, why you set auto-fit value to grid-template-columns property?

I want to add one div with .grid-title class to have e.g. 100px

If custom item will always be in one place, you can set this row height in grid-template-rows: 250px 250px 100px; plus grid-auto-rows: 250px;: https://codepen.io/hisbvdis/pen/wvwrXye

If custom item can be in random place, you can set grid-auto-rows: 100px plus add grid-rows: span 2; properties to items: https://codepen.io/hisbvdis/pen/vYBerjL

Upvotes: 2

Related Questions