4x4 Grid Of Squares That Scale Up To A Maximum Width

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

Solution 1:

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>

Solution 2:

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>

Solution 3:

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>