4x4 grid of squares that scale up to a maximum width

Question

How should I edit the CSS and/or HTML so that these squares fit to a particular maximum width, while maintaining the 4x4 square structure? Right now, it resizes to the width of the browser window, but if the browser is stretched out across the screen, the squares are far too large and the height goes well beyond the height of my screen.

I've tried adding a container div and adding a max-width, but that does not seem to relate to the width of 4 squares next to each other, and changes the width of each square without adjusting the height evenly.

.w {
  overflow: hidden;
}

section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #CCC;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
  color:white;
}

<div id="playGrid" class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

Not quite sure I understand what you are after. Are you saying you want the squares to have equal heights and widths on all screen sizes? — Pytth, Jan 20 '21 at 17:57
I watch the squares to have equal heights and widths, but also reach a max width & height as you stretch the width of the browser window. — Chewie The Chorkie, Jan 20 '21 at 18:17

score 2 · Answer 1 · answered Jan 20 '21 at 18:16

How about, you know, CSS grid? You can use the width and height to adjust the whole shebang's size.

#playGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 15px;
  align-content: stretch;
  width: 50vw;
  height: 50vw;
}
#playGrid div {
  background: #CCC;
  color: white;
}

<div id="playGrid" class="w">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
</div>

score 2 · Answer 2 · answered Jan 20 '21 at 18:25

You can leverage CSS Grid Layout to define your grid, and then bound the height and width of the section to 100vh:

#playGridSection {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, 25%);
  height: 100vh;
  width: 100vh;
  margin-right: auto;
  margin-left: auto;
}
section div {
  background: #CCC;
  color:white;
  align-self: stretch;
  justify-self: stretch;
  margin: 1vh;
}

<div id="playGrid">
  <section id="playGridSection">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

G-Cyrillus · Accepted Answer · 2021-01-20T18:33:58.283

You may relay on flex and a pseudo to stretch your element to a square boxe.

Here is a basic example. (You should also clarify what kind of content should be standing inside and which kind of layout you need, so we can tune/update HTML(the content to put inside) & CSS according to your real expected result, it could be like a sudoku grid ? Responsive grid of squares within a responsive grid of squares )

body {margin:0;}
.w {}

section {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  max-width: 100vmin;
  margin: auto;
}

section div {
  background: #CCC;
  min-width: 21%;
  /* cannot be more than 4 on a row */
  flex-grow: 1;
  /* stretch their width evenly */
  margin: 1vmin;
}

section div:before { 
/* note, you need to stretch only one per row and 
the selector can be also : section div:nth-child(4n):before  */
  content: '';
  padding-top: 100%;
  /* stretch height using width as a reference (padding/margin units in % ) */
  float: left;
  /* let it on the side to add content .. aside */
}

<div id="playGrid" class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

Thanks for quick response. When I view the example in a full page, it still stretches out to the entire width of my screen if I stretch the browser window's width enough, which makes its height go beyond the height of my screen. I think I need a maximum width that all those boxes can stretch out to. I also cannot see the boxes separately in your example. It results in one, large grey square. — Chewie The Chorkie, Jan 20 '21 at 18:16
to separate them , if gap is not supported by your browser, then we can use margin . Do you mean to have your 16 square always visible at screen ? updated the snippet , take a look :) @ChewieTheChorkie — G-Cyrillus, Jan 20 '21 at 18:18
Gap does not seem to be supported. Yes I want 16 always visible. — Chewie The Chorkie, Jan 20 '21 at 18:21
okay, just updated the snippet with vmin units to resize section according to viewport. Sp no matter if toi have à landscape or portrait screenview. — G-Cyrillus, Jan 20 '21 at 18:22

4x4 grid of squares that scale up to a maximum width

3 Answers3

Linked