填充 CSS 网格布局中的空单元格

Question

我有一组 div 磁贴，我已经通过 CSS 网格布局尽可能“自动”地安排了它们； 我的最终想法是，即使我不知道有多少瓷砖，它们也会被正确调整大小和放置。 这工作正常。

现在，我希望将单击的任何图块的面积加倍。 据我所知，这意味着增加这个瓷砖的跨度：

grid-row: span 2;
grid-column: span 2;

如果我点击任何不在最右侧列中的图块，我会对结果感到满意。 当最右边的图块展开时，它们会被包裹到下一行。

有没有办法强制这些瓦片向左扩展，以便其他非活动瓦片被包裹？

Codepen示例在这里

 $('div.tile').click(function() { $('div.tile').not(this).removeClass('chosen'); $(this).toggleClass('chosen'); /* Attempt to find current placement, to see if we could change the span rules based on results. Probably disregard. */ var colCount = $('div.wrapper').css('grid-template-columns').split(' ').length; console.log(colCount); var placement = $(this).css('grid-row'); console.log(placement); });

 body { margin: 0; padding: 0; background-color: #eee; } .wrapper { display: grid; margin: 18px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); grid-auto-rows: 286px; grid-gap: 18px; } .tile { position: relative; background-color: #eee; background-color: #149; text-align: center; box-shadow: 0 3px 12px rgba(0,0,0, 0.15), 0 4px 6px rgba(0,0,0, 0.25); } .tile.chosen { grid-row: span 2; grid-column: span 2; } .tile.chosen::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background-color: rgba(255,255,255,.2); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="tile">A</div> <div class="tile">B</div> <div class="tile">C</div> <div class="tile">D</div> <div class="tile">E</div> <div class="tile">F</div> <div class="tile">G</div> <div class="tile">H</div> <div class="tile">I</div> </div>

Answer 1

使用 CSS 网格自动放置

CSS grid-auto-flow属性控制自动放置的网格项如何放置在网格中。

此属性具有三个可能的值：

• row （默认）
• column
• dense

使用dense ，自动放置算法用适合的项目填充未占用的单元格。

这是您的代码， grid-auto-flow: dense在网格容器上：

 $('div.tile').click(function() { $('div.tile').not(this).removeClass('chosen'); $(this).toggleClass('chosen'); var colCount = $('div.wrapper').css('grid-template-columns').split(' ').length; console.log(colCount); var placement = $(this).css('grid-row'); console.log(placement); });

 body { margin: 0; padding: 0; background-color: #eee; } .wrapper { display: grid; margin: 18px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); grid-auto-rows: 286px; grid-gap: 18px; grid-auto-flow: dense; /* NEW */ } .tile { position: relative; background-color: #eee; background-color: #149; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.25); } .tile.chosen { grid-row: span 2; grid-column: span 2; } .tile.chosen::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background-color: rgba(255, 255, 255, .2); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="tile">A</div> <div class="tile">B</div> <div class="tile">C</div> <div class="tile">D</div> <div class="tile">E</div> <div class="tile">F</div> <div class="tile">G</div> <div class="tile">H</div> <div class="tile">I</div> </div>

修订代码笔

---

从规范：

7.7. 自动放置： grid-auto-flow属性

未明确放置的网格项会通过自动放置算法自动放置到网格容器中的未占用空间中。

grid-auto-flow控制自动放置算法的工作方式，准确指定自动放置的项目如何流入网格。

row

自动放置算法通过依次填充每一行来放置项目，并根据需要添加新行。 如果既没有提供row也没有提供column ，则假定为row 。

column

自动放置算法通过依次填充每一列来放置项目，并根据需要添加新列。

dense

如果指定，自动放置算法将使用“密集”打包算法，如果稍后出现较小的项目，该算法会尝试更早地填充网格中的孔。 这可能会导致项目出现乱序，这样做会填补较大项目留下的空洞。

---

使用 CSS 网格定义的放置

CSS Grid 规范提供了许多用于调整和定位网格项的属性和方法。 因此，如果您不必依赖自动放置，请使用定义的放置以获得更多控制。

 grid-container { display: grid; grid-template-rows: repeat(4, 25%); grid-template-columns: repeat(4, 25%); grid-gap: 5px; width: 400px; height: 400px; } [left]:hover { grid-column: -1 / -3; grid-row: 1 / 2; background-color: orange } [right]:hover { grid-column: 1 / 3; grid-row: 2 / 3; background-color: orange } [down]:hover { grid-column: -1 / -2; grid-row: 2 / 4; background-color: orange } [up]:hover { grid-column: 3 / 4; grid-row: -4 / -2; background-color: orange } grid-item { background-color: lightgreen; display: flex; align-items: center; justify-content: center; text-align: center; }

 <grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item left>HOVER<br>to go left</grid-item> <grid-item right>HOVER<br>to go right</grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item down>HOVER<br>to go down</grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item up>HOVER<br>to go up</grid-item> <grid-item></grid-item> </grid-container>