填充 CSS 网格布局中的空单元格
Filling empty cells in CSS Grid Layout
我有一组 div 块,我已通过 CSS 网格布局尽可能 "automatically" 排列;我的最终想法是,即使我不知道有多少块瓷砖,它们都会正确调整大小和放置。这工作正常。
现在,我希望将单击的任何图块的面积加倍。据我所知,这意味着增加此图块的跨度:
grid-row: span 2;
grid-column: span 2;
如果我单击不在最右侧列中的任何图块,我对结果很满意。当最右边的图块展开时,它们会被包裹到下一行。
有什么方法可以强制这些图块向左展开,从而包裹其他非活动图块吗?
Codepen 示例 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 网格 自动 放置
CSSgrid-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. Automatic Placement: the grid-auto-flow
property
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
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.
column
The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.
dense
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 网格 已定义 放置
CSS 网格规范提供了许多用于调整和定位网格项目的属性和方法。因此,如果您不必依赖自动放置,请使用定义的放置以获得更多控制。
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>
我有一组 div 块,我已通过 CSS 网格布局尽可能 "automatically" 排列;我的最终想法是,即使我不知道有多少块瓷砖,它们都会正确调整大小和放置。这工作正常。
现在,我希望将单击的任何图块的面积加倍。据我所知,这意味着增加此图块的跨度:
grid-row: span 2;
grid-column: span 2;
如果我单击不在最右侧列中的任何图块,我对结果很满意。当最右边的图块展开时,它们会被包裹到下一行。
有什么方法可以强制这些图块向左展开,从而包裹其他非活动图块吗?
Codepen 示例 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 网格 自动 放置
CSSgrid-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. Automatic Placement: the
grid-auto-flow
propertyGrid 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
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
norcolumn
is provided,row
is assumed.
column
The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.
dense
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 网格 已定义 放置
CSS 网格规范提供了许多用于调整和定位网格项目的属性和方法。因此,如果您不必依赖自动放置,请使用定义的放置以获得更多控制。
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>