html - 放大到最大宽度的 4x4 正方形网格

Question

我应该如何编辑 CSS 和/或 HTML 以使这些正方形适合特定的最大宽度，同时保持 4x4 正方形结构？现在，它会根据浏览器窗口的宽度调整大小，但如果浏览器在屏幕上展开，方块太大，而且高度远远超出了我的屏幕高度。

我尝试添加一个容器 div 并添加一个最大宽度，但这似乎与相邻的 4 个正方形的宽度无关，并且在不均匀调整高度的情况下更改每个正方形的宽度。

.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>

标签： htmlcss

Answer 1

你知道，CSS 网格怎么样？您可以使用widthandheight来调整整个 shebang 的大小。

#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>