具有双倍宽度第一项的 CSS 网格布局

Question

我正在尝试实现基于网格的布局，其中项目将在灵活的网格中布置，使用grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) 。 然后项目会自动放置到网格中，效果很好。

我希望第一个项目是双倍宽度，所以它跨越两列。 使用这样的规则很容易实现：

.grid > *:first-child {
  grid-column: 1/span 2;
}

然而，一旦没有足够的空间来容纳两列，这就会导致一个问题——第二个小列仍然出现，小于我们的最小值 400px，这破坏了第二行以后的漂亮规则网格。 我的理解是span 2本质上强制算法创建一个额外的列。 除了使用 JS 测量网格容器并在没有足够空间时添加和删除span 2 ，还有其他选择吗？ 此网格将在不同宽度的多个页面上使用，因此我不能仅使用媒体查询来启用/禁用此行为。

这是重现问题的代码：

 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-auto-columns: none; grid-auto-rows: 300px; } .item { background-color: palegreen; border: 1px solid black; } .grid > *:first-child { background-color: lightcyan; grid-column: 1/span 2 }

 <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>

请参阅此 CodePen以获取问题的实时示例（将视口调整到 700像素左右以查看它）。

Answer 1

简单的解决方案是将列规则移动到媒体查询中。 您需要考虑文档和任何祖先的边距/填充 - 在我的计算机上，这似乎是8px ，因此min-width: 816px查询有效。

 *, ::before, ::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { padding: 8px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-auto-rows: 50px; } .item { background-color: palegreen; border: 1px solid black; } .grid>*:first-child { background-color: lightcyan; } @media (min-width: 816px) { .grid>*:first-child { grid-column: 1/span 2; } }

 <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>

JSFiddle 演示

Answer 2

mediaquerie 在这里确实很有帮助，这是一个典型的用途。 您也可以反过来使用它，第一个孩子跨越屏幕 XX 宽度下方的整行。

下面的另一个例子

 *{box-sizing:border-box} .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-auto-columns: none; grid-auto-rows: 30px; } .grid.smaller { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-columns: none; grid-auto-rows: 30px; } .item { background-color: palegreen; border: 1px solid black; } .grid>*:first-child { background-color: lightcyan; grid-column: 1 / span 2; } .grid.smaller >*:first-child { background-color: tomato; grid-column: 1 / span 4; } @media screen and (max-width: calc(800px + 2em)) { /* average inclusions of borders + scrollbar */ .grid.grid>*:first-child { grid-column: 1 /-1; } }

 <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <hr> <div class="grid smaller"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>