我有一组div瓷砖,通过CSS Grid布局尽可能地“自动”排列;我的最终想法是,即使我不知道有多少瓷砖,它们都可以被正确地调整大小和放置。这个目标已经实现了。
现在,我想要实现的是,当任何一个瓷砖被点击时,将其面积加倍。据我所知,这意味着增加该瓷砖的跨度:
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>