CODEWITHSUNDEEP
htmlcsscss-grid
ZiNNED
ZiNNED

Reputation: 2650

CSS grid of squares with maximum height of wrapper

I'm trying to make a CSS grid layout with square boxes. This works, but when I set the maximum height of the wrapper, it'll keep the first row of squares square, but the second and onward rows are cropped to rectangles instead. I can't seem to find why it's doing what it does.

#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">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

When I exclude the max-height on the wrapper div, it shows all sqares, which is what I want. However, I want them all to be shown within a portion of the screen which is at max 75vh high. It must be said, the number of rows and columns and thus the number of squares showing is variable. No matter the number, they should be shown as squares inside 75vh of the screen.

I guess (and hope) it's something I'm missing in CSS, but I cannot figure out what. If someone could push me in the right direction, that'd be much appreciated!

Upvotes: 0

Views: 961

Answers (2)

coreyward
coreyward

Reputation: 80041

Your #wrapper has to be the same width as the height. In practice I don't know how you would account for grids shorter than the viewport with CSS alone using this approach.

#wrapper {
  display: grid;
  width: 75vh;
  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">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 1

Mohammad Agha
Mohammad Agha

Reputation: 118

In CSS change the following selector:

#wrapper::before {
    content: '';
    width: 0;
    padding-bottom:  50%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }

Try to use a padding value which doesn't go over the 75vh of the wrapper.

Upvotes: 1

Related Questions