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;
}
#playGriddiv {
  background: #CCC;
  color: white;
}

<divid="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;
}
sectiondiv {
  background: #CCC;
  color:white;
  align-self: stretch;
  justify-self: stretch;
  margin: 1vh;
}

<divid="playGrid"><sectionid="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;
}

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

sectiondiv: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 */
}

<divid="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>