When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to be the max-height property in the CSS. Here is the snippet:
#wrapper {
display: grid;
width: 100%;
max-height: 75vh; /* excluding this line gives all nice squares */
grid-template-columns: repeat(10, auto);
grid-auto-rows: 1fr;
}
#wrapper::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
#wrapper>* {
background: blue;
border: 1px white solid;
position: relative;
}
#wrapper>*:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}<div id="wrapper">
<!-- divs here -->
</div>The goal is to display all squares within a portion of the screen that is at most 75vh high, regardless of the number of rows and columns. This poses a challenge as the number of squares may vary. The desired outcome is for all squares to maintain their shape while fitting within the specified height limit.
If anyone can provide guidance on how to achieve this using CSS, it would be greatly appreciated!