如何修复响应大小的砌体

Posted 2021-03-27

我有一个简单的CSS砌体，当我减小屏幕尺寸时，第二个块（item2）的尺寸太小。如何使用媒体查询或不使用媒体查询将块的大小更改为全宽？

body {
  font-family: sans-serif;
  background-color: #1b1b1b;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(180px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-item {
  padding: 1rem;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #929796;
  background-color: #333;
  border-radius: 5px;
}
.grid-item:nth-child(odd) {
  background-color: #424242;
}

.big {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

<div class="grid-layout">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item big">item 3</div>
    <div class="grid-item">item 4</div>
    <div class="grid-item">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item">item 8</div>
    <div class="grid-item big">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item">item 13</div>
    <div class="grid-item">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item">item 19</div>
    <div class="grid-item">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item">item 23</div>
</div>

答案

根据我上面的评论，问题是网格布局过度约束：

• 一方面，可用的宽度小于每个180px的两列（因为你已经将列设置为grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))） - 第二个item想要下降到下一行;
• 另一方面，第二行中的第三个.item.big跨越两列，这迫使布局保持第二列。

你有以下〜425px及以下的问题 - 如果你想要定位这个屏幕你可以尝试媒体查询来调整你的big元素只跨越小屏幕宽度的第一列 - 见下面的演示：

body {
  font-family: sans-serif;
  background-color: #1b1b1b;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(180px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-item {
  padding: 1rem;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #929796;
  background-color: #333;
  border-radius: 5px;
}
.grid-item:nth-child(odd) {
  background-color: #424242;
}

.big {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

@media only screen and (max-width: 450px) { /* added */
  .big {
    grid-column: 1;
  }
}

<div class="grid-layout">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item big">item 3</div>
    <div class="grid-item">item 4</div>
    <div class="grid-item">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item">item 8</div>
    <div class="grid-item big">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item">item 13</div>
    <div class="grid-item">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item">item 19</div>
    <div class="grid-item">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item">item 23</div>
</div>

以上是关于如何修复响应大小的砌体的主要内容，如果未能解决你的问题，请参考以下文章

如何修复 div 的大小但保持响应

如何修复“HTTP 标头中 CRLF 序列的不正确中和（'HTTP 响应拆分'）”

砌体：从最后一列移除排水沟

如何修复重叠的片段

有哪些选项可以使用带有可调整大小和可排序元素的 flexbox 进行类似砌体的布局

如何修复空白片段？