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

我有一组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); } 

  
 
A
 
B
 
C
 
D
 
E
 
F
 
G
 
H
 
I
  

Answer 1

使用CSS网格自动放置

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

此属性有三个可能的值：

• row （默认）
• column
• dense

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

这是你的代码， grid-auto-flow: 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); } 

  
 
A
 
B
 
C
 
D
 
E
 
F
 
G
 
H
 
I