I need to make 4×2 grid and make every cell inside of it equal height and width and so far I’ve had some success but no matter what I do, cells stretch when I put inside a slightly bigger child element.
I need my grid container to be made using `grid-template-areas’ because it is dynamic.
Here’s the code for grid container:
export const WidgetsGrid = styled.div'
width: 100%;
height: 100%;
display: grid;
gap: 1rem;
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
Here’s how I set its grid-template-areas
<WidgetsGrid style={{ gridTemplateAreas }} >
I tried editing multiple grid properties but the behaviour is still the same, it always stretches to fit an element
Veljko Cukic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
A basic 4×2 grid, with rows and columns sized equally using 1fr.
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
It seems to work as desired. The columns and rows are equally sized, based on the cell with the largest content.
body {
margin: 1em;
}
.d1 {
display: grid;
gap: 1em;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.d1 > * {
background: cyan;
}<div class="d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>
6
</div>
<div>
7
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
</div>
<div>8</div>
</div>But then we add a wide image, and all of a sudden our columns are no longer equal sizes. The column containing the image has stretched to fit ithe image.
body {
margin: 1em;
}
.d1 {
display: grid;
gap: 1em;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.d1 > * {
background: cyan;
}<div class="d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>
6
<br><br>
<img src="https://picsum.photos/id/1074/500/100">
</div>
<div>
7
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
</div>
<div>8</div>
</div>Replacing 1fr with minmax(0, 1fr) will force the columns to be equal width.
grid-template-columns: repeat(4, minmax(0, 1fr));
body {
margin: 1em;
}
.d1 {
display: grid;
gap: 1em;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
}
.d1 > * {
background: cyan;
}<div class="d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>
6
<br><br>
<img src="https://picsum.photos/id/1074/500/100">
</div>
<div>
7
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
</div>
<div>8</div>
</div>To keep the image contained within the cell, you could either hide the overflow or scale the image … this snippet does the latter, using max-width: 100%.
body {
margin: 1em;
}
.d1 {
display: grid;
gap: 1em;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
}
.d1 > * {
background: cyan;
}
.d1 img {
max-width: 100%;
}<div class="d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>
6
<br><br>
<img src="https://picsum.photos/id/1074/500/100">
</div>
<div>
7
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
</div>
<div>8</div>
</div>