This question already has answers here:
Equal height rows in CSS Grid Layout
(2 answers)
Closed 24 days ago.
This is grid-template-rows. As you can see last rows has more height. I wanna make all of the row's height same whenever a row get more height than other's.
This must be with display: grid; property.
Just set grid-auto-rows to 1fr as the example below:
More info on MDN and CSS tricks
.container {
display: grid;
grid-auto-rows: 1fr; /* make all rows the same height */
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.container > div {
border: 1px solid gray;
padding: 0.5rem;
}
<div class='container'>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E<br>E<br>E</div>
</div>
Related
I'm building a grid layout using CSS Grid and I want all my columns to have the same size (fixed sized) and that size being the one of the largest column.
I know that I can do it using JS or even display: table but I would like to do it using CSS Grid (if it's possible).
Here's what I have:
* {
box-sizing: border-box;
}
div {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
gap: 5px;
}
span {
padding: 10px;
border: 1px solid black;
}
<div>
<span>Orange</span>
<span>Purple</span>
<span>Aquamarine</span>
<span>Black</span>
<span>Brown</span>
<span>Red</span>
</div>
I fixed the width at 120px but I want that width to be the one of Aquamarine which is the largest one.
If you have a fixed number of columns, you can do it by placing your grid element inside a wrapper element styled with display: inline-block; and then setting grid-template-columns: repeat(6, 1fr);. See this answer.
However, I don't know how to do this in a grid where you have a variable number of columns by using auto-fit or auto-fill.
* {
box-sizing: border-box;
}
.wrapper {
display: inline-block;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
}
span {
padding: 10px;
border: 1px solid black;
}
<div class="wrapper">
<div class="grid">
<span>Orange</span>
<span>Purple</span>
<span>Aquamarine</span>
<span>Black</span>
<span>Brown</span>
<span>Red</span>
</div>
</div>
This question already has answers here:
Row in CSS Grid should take up remaining space [duplicate]
(2 answers)
Closed 2 years ago.
I am using CSS Grid to create a 3 row, 3 column layout. I want the top and bottom rows to be fixed in height, with the middle row adjusting its height based on viewport height.
HTML:
<div className="body_wrapper">
<div className="body_wrapper_item"></div>
<div className="body_wrapper_item"></div>
<div className="body_wrapper_item"></div>
<div className="body_wrapper_item"></div>
<div className="body_wrapper_item"></div>
<div className="body_wrapper_item"></div>
</div>
CSS:
.body_wrapper {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 80px 70% 80px;
grid-auto-columns: 33% 33% 33%;
grid-gap: 10px;
}
.body_wrapper_item {
background: pink;
width: 100vw;
}
.body_wrapper_item:nth-child(1), .body_wrapper_item:nth-child(3) {
background: #3D3D3D;
}
It looks correct when browser not resized:
But when reducing viewport height the bottom row shrinks rather than staying fixed:
To reiterate, I want to have the top and bottom rows fixed (80px) while the middle row adjusts with the window.
Just use "fraction of available space", as per #Temani's comment:
.body_wrapper {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 80px 1fr 80px;
grid-auto-columns: 33% 33% 33%;
grid-gap: 10px;
}
This question already has answers here:
Why does Chrome 80 cause this grid-template-rows: auto problem
(2 answers)
Closed 3 years ago.
I have a css grid with 2 columns and 3 rows. The third row content is not always present because of an angular ngif clause. An image is present in the first column that spans the 3 rows. With all that said, I get 2 different results in Chrome (80.0.3987.87, which is the latest stable as I post) and Firefox.
Is there a way to control the rows so that it behaves like in Firefox, i.e. the third row grows when the image height is bigger than the 2 first row heights combined.
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
}
.image {
width:40px;
height:100px;
grid-column:1;
grid-row:1 / span 3;
background-color: #f00;
}
.text1 {
grid-column:2;
grid-row:1;
}
.text2 {
grid-column:2;
grid-row:2;
}
<div class="grid">
<div class="image"></div>
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
</div>
Here is the codepen that you can check in both Chrome and Firefox.
And here is an image to show the difference:
As you can see, Chrome increases equally the height of rows 1 and 2 (row 3 stays 0). Firefox increases only the height of row2, i.e. the last visible row with content.
Note that I tried setting grid-template-rows as "minmax(0, auto) minmax(0, auto) 1fr", but then row 3 will have a weird height that makes the grid height bigger than its content.
Update: Ah! Was able to try it on a previous Chrome version (79) and I get the same result as in Firefox this time. So it seems 80 changed it. Can some people here confirm?
You can update your code like below. It seems to work the same in Chrome 80 and firefox. Worth to note that 1fr is equal to minmax(auto, 1fr) which is indeed different from minmax(0,1fr) but still don't know exactly what makes both behave differently.
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto 1fr;
}
.image {
width:40px;
height:100px;
grid-column:1;
grid-row:1 / span 3;
background-color: #f00;
}
.text1 {
grid-column:2;
grid-row:1;
}
.text2 {
grid-column:2;
grid-row:2;
}
<div class="grid">
<div class="image"></div>
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
</div>
The way you have mentioned the grid-template-rows for the container is invalid in chrome. I guess that's the issue
Try this css and see;
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.image {
height: 100px;
grid-row: 1/4;
background-color: #f00;
}
.text1 {
grid-column: 2;
grid-row: 1;
}
.text2 {
grid-column: 2;
grid-row: 2;
}
</style>
Hope that helps!!
This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Closed 3 years ago.
I have three divs. how to do two div as columns but the thrid need to be center and one column without grid-area?
Like in the picture.
I have try:
display:grid;
grid-template-columns:1fr 1fr;
grid-template-row:1fr 1fr;
But its create four columns.. and not what I need..
Create a grid with 4 columns, each div should span 2 columns, and the last child should start at the 2nd column.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
grid-gap: 2px;
}
.grid > div {
height: 20vmin;
width: 20vmin: 20vmin;
grid-column-end: span 2;
background: red;
}
.grid > div:last-child {
grid-column-start: 2;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Single-row grid with height 1fr not filling height in Chrome
(1 answer)
Closed 3 years ago.
I am trying to see if it is possible to grow the height of a grid to fill the height of a parent container.
What I've tried:
I've tried setting 100% height/min-height on the grid container and child divs.
100vh isn't the solution as that will not be dynamic.
I'm a bit stuck on how to do this and if it is possible.
Any help with this is much appreciated. Thanks!
I've created a CodePen to try to figure this out here:
https://codepen.io/fylzero/pen/bGGvBPa
HTML
<div class="flex">
<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
</div>
CSS
html, body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
}
.flex {
display: flex;
padding: 10px;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
outline: 1px solid red;
}
.grid {
display: grid;
padding: 10px;
height: 100%; /* THIS DOESN'T DO IT */
grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
outline: 1px solid green;
}
.grid div {
padding: 10px;
outline: 1px solid blue;
}