After countless attempts and hours of tweaking, my goal remains to create a 3x3 grid composed of squares that adjust to fit the content inside. I also want each square to have a corner number, with text content centered both vertically and horizontally. Despite trying various methods, I've only been able to achieve a compromise between square cells and potential overflow outside the container. Setting height and width values are deliberately avoided to allow for dynamic sizing of the cells and grid.
The first snippet displays a grid with square cells and corner numbers. However, the issue of content overflowing persists. The grid container must use position:relative due to a label positioned next to it using 'absolute', which isn't included here.
In the second snippet, the only change made was removing 'aspect-ratio: 1'. This adjustment prevents the cells from overflowing but sacrifices the square shape.
I'm searching for a solution that maintains square grid cells while accommodating varying content sizes without exceeding the boundaries. Is there a way to achieve this?
.basic-text {
font-size: larger;
font-family: Arial, Helvetica, sans-serif;
}
.fancy-card {
border: 3px solid grey;
border-radius: 15px;
margin: 1em;
}
#output-card {
display: inline-block;
vertical-align: top;
}
#output-grid-container {
margin: 1em;
padding: 2em;
position: relative;
background-color: white;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;
}
.grid-square {
position: relative;
border: 2px solid grey;
border-radius: 3px;
padding: 1em;
aspect-ratio: 1;
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
text-align: center;
line-height: 150%;
}
p {
white-space: pre;
text-wrap: wrap;
}
.corner-rating-number {
position: absolute;
bottom: 0.1em;
left: 0.3em;
margin: 0;
padding: 0;
}
select {
height: 2em;
width: 10em;
border-radius: 0.5em;
}<div class="fancy-card" id="output-card">
<div id="output-grid-container">
<div class="grid-square">
<span class="corner-rating-number basic-text">7</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">8</span>
<p class="basic-text">Pink</p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">9</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">4</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">5</span>
<p class="basic-text">Violet</p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">6</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">1</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">2</span>
<p class="basic-text"></p>
</div>
<div class="grid-square">
<span class="corner-rating-number basic-text">3</span>
<p class="basic-text">Blue<br><br>Green</p>
</div>
</div>
</div>