css - 语义 UI 网格禁用等高列以获取较小的列来堆叠

Question

我有两个宽度和高度不同的小部件类别。大部件的宽度和高度是小部件的 2 倍。

现在我使用语义 ui 类(如“六宽宽屏”等)根据屏幕大小指定列宽。所以顺序是首先显示所有大部件，然后显示小部件。在 Computer 和 tablet size 上，前两个大 widget 的宽度为 8，因此它们各自占据第一行。在宽屏上，我只给大部件设置了 6 宽，所以它们每行只占用 16 列中的 12 列，所以 2 列小部件可以达到第一行。

HTML

<div  class="ui internally celled stackable grid" >
  <div class="row">
    <div style="background-color: blue; height: 600px;" class="column six wide widescreen eight wide computer eight wide tablet sixteen wide mobile">
      Big Widget 1
    </div>
    <div style="background-color: green; height: 600px;" class="column six wide widescreen eight wide computer eight wide tablet sixteen wide mobile">
      Big Widget 2
    </div>
    <div style="background-color: red; height: 300px;" class="column two wide widescreen two wide large-screen four wide computer eight wide mobile four wide tablet">
      Small Widget 1
    </div>
    <div style="background-color: orange; height: 300px;" class="column two wide widescreen two wide large-screen four wide computer eight wide mobile four wide tablet">
      Small Widget 2
    </div>
    <div style="background-color: purple; height: 300px;" class="column two wide widescreen two wide large-screen four wide computer eight wide mobile four wide tablet">
      Small Widget 3
    </div>
    <div style="background-color: gray; height: 300px;" class="column two wide widescreen two wide large-screen four wide computer eight wide mobile four wide tablet">
      Small Widget 4
    </div>
  </div>
</div>

Codepen Demo

现在我的问题是:小部件的高度正好是大部件的一半高度，因此宽屏模式下 2 个小部件下方的空白区域可以用第三个和第四个小部件填充。

有没有办法将前两个小部件列分成两半以适应第一行中的第三个和第四个部件？

How it looks right now

How I want it to

Answer 1

我已经基于内置的 CSS Grid 而不是您使用的外部库完成了它。请参阅Codepen Demo .

我没有触及您 HTML 的 部分，但我删除了您在 中提到的两个文件。然后添加以下 CSS:

.row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px;
  grid-auto-flow: dense;
}
.six{
  grid-column: span 2;
  grid-row: span 2;
}

现在主流浏览器都支持CSS Grid，内置CSS。无需依赖任何其他库。如果您搜索“CSS Grid”，可以找到很多教程。

希望这对您有所帮助。