在CSS网格布局中填充空单元格 [英] Filling empty cells in CSS Grid Layout

问题描述

我有一组div瓷砖，我通过CSS网格布局尽可能自动排列;我最后的想法是，即使我不知道有多少瓷砖，它们都可以调整大小并正确放置。这工作正常。

I have a set of div tiles that I've arranged through the CSS Grid Layout as "automatically" as possible; my final idea is that even if I don't know how many tiles there are, they all get sized and placed correctly. This is working fine.

现在，我希望将所点击的任何图块的面积加倍。据我所知，这意味着增加这个区块的范围：

Now, I'm looking to double the area of any tile that is clicked on. As far as I know, that means increasing the span of this tile:

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

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

I'm happy with the results if I click on any tile that is not in the right-most column. When the rightmost tiles get expanded, they are wrapped down onto the next line.

有没有办法强制这些图块向左扩展，以便其他非相反包裹活动瓷砖？

Is there any way to force these tiles to expand to the left, so that other non-active tiles are wrapped instead?

Codepen示例此处

Codepen example here

$('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>

推荐答案

使用CSS网格自动放置

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

Working with CSS Grid Auto Placement

The CSS grid-auto-flow property controls how auto-placed grid items are placed in the grid.

此属性有三个可能的值：

This property has three possible values:

• row （默认值）


• 专栏


• 密集

• row (the default)
• column
• dense

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

With dense, the auto-placement algorithm fills unoccupied cells with items that fit.

这是您的代码，网格容器上的 grid-auto-flow：密集：

Here's your code, with grid-auto-flow: dense on the grid container:

$('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>

修订后的codepen

来自规格：

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

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

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.

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

grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

行

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

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

专栏

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

The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.

密集

如果指定，自动放置算法使用密集打包
算法，如果
较小的项目稍后出现，它会尝试在网格中填充漏洞。这可能会导致项目无序显示
，这样做会填补较大项目留下的漏洞。

If specified, the auto-placement algorithm uses a "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

---

使用CSS Grid 定义放置

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

---

Working with CSS Grid Defined Placement

The CSS Grid specification provides many properties and methods for sizing and positioning grid items. So if you don't have to rely on auto placement, use defined placement for more control.

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>

这篇关于在CSS网格布局中填充空单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！