Question

我有一组div瓷砖，我已经通过CSS网格布局排列为＆＃34;自动＆＃34;尽可能;我最后的想法是，即使我不知道有多少瓷砖，它们都可以正确尺寸和放置。这很好。

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

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

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

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

Codepen示例here

＆＃13;

$('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);
});

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

使用CSS网格自动放置

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

此属性有三个可能的值：

row（默认）
column
dense

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

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

＆＃13;

$('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);
});

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

revised codepen

来自规范：

7.7. Automatic Placement: the grid-auto-flow property

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

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

<强> row

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

<强> column

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

<强> dense

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

使用CSS Grid 定义放置

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案:

使用CSS网格自动放置

使用CSS Grid 定义放置