I’m trying to achieve a css grid with various squares that scrolls sideways:
https://codepen.io/flapusmog/pen/poOqrWa
The problem is that the aspect-ratio of the squares outside the original width gets squashed, and loses their proportions. It’s as if the width of the grid container doesn’t grow with it’s content. It seems to me that the width of the grid container is not expanding:
.grid {
display:grid;
grid-template-rows: repeat(3,auto);
grid-auto-flow: column;
grid-template-columns:repeat(auto-fit,30vh);
height:100%;
/* not working */
width:auto;
}
.cell {
outline:1px solid red;
height:100%;
width:auto;
}
.content {
aspect-ratio:1/1;
}
.c2 {
grid-row:span 3;
grid-column:span 3;
}
.c3 {
grid-row:span 3;
grid-column:span 3;
}
.break {
grid-row-start: 1;
font-size:30px;
}
<div class="grid">
<div class="cell c3">
<div class="content">
hello
</div>
</div>
<div class="cell c2">
<div class="content">
helo
</div>
</div>
<div class="cell">
<div class="content">
helll
</div>
</div>
<div class="cell">
<div class="content">
helll
</div>
</div>
<div class="cell break">
<div class="content">
sort of a title
</div>
</div>
<div class="cell">
<div class="content">
helll
</div>
</div>
<div class="cell">
<div class="content">
helll
</div>
</div>
<div class="cell c3">
<div class="content">
hello
</div>
</div>
<div class="cell c2">
<div class="content">
helo
</div>
</div>
<div class="cell">
<div class="content">
helll
</div>
</div>
</div>
The problem (happens at the edge of the original width limit)
how can i make sure they all stay square? Thanks!
2
Answers
I believe that you can resolve the problem by adding the aspect-ratio to the cells and not to the content.
Add the following to your
cell
class:The aspect-ratio attribute forces every cell to be square, and the flex display keeps the content from overlapping on each other.
You can also remove
width:auto
from.grid
.