1

I want to make a 3x3 grid of squares in CSS/HTML that doesn't pass the height of the page and is responsive.

I've tried changing the width and height of the article to make it smaller percentage wise but it makes it too small when on mobile and too big when on desktop.

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
  background: tomato;
  font-size: 9vw;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.article1 {
  border-style: solid;
  border-width: 5px;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.h1 {
  font-size: 3vw;
  text-align: center;
}
<article class="article1">
  <div>
    <h1 class="h1">Text 1</h1>
  </div>
  <div class="square-container">
    <div class="square">
      <div class="content">0</div>
    </div>
    <div class="square">
      <div class="content">1</div>
    </div>
    <div class="square">
      <div class="content">2</div>
    </div>
    <div class="square">
      <div class="content">3</div>
    </div>
    <div class="square">
      <div class="content">4</div>
    </div>
    <div class="square">
      <div class="content">5</div>
    </div>
    <div class="square">
      <div class="content">6</div>
    </div>
    <div class="square">
      <div class="content">7</div>
    </div>
    <div class="square">
      <div class="content">8</div>
    </div>
  </div>
  <div>
    <h1 class="h1">Text 2</h1>
  </div>
</article>

I want it to resize so that it's width and height are responsive and the height never exceeds the display (never have to scroll).

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
SFox
  • 13
  • 3
  • 1
    Make each square 33vh by 33vh....No? – Paulie_D Jul 09 '19 at 12:30
  • very similar to https://stackoverflow.com/questions/29307971/css-grid-of-squares-with-flexbox/29308467#29308467 , but the pseudo is floatting, it allows to add content without absolute position ;) ... but the vh h unit is for you here and you may drop the pseudo – G-Cyrillus Jul 09 '19 at 12:46
  • related: https://stackoverflow.com/a/54928586/8620333 – Temani Afif Jul 09 '19 at 13:04
  • I changed the code to have square width and height each 33vh. It didn't work. They stopped being squares and instead took on the ratio of the view. – SFox Jul 09 '19 at 19:41

0 Answers0