0
请看下面的例子。我正在学习CSS网格。整个目的是为了保持简单并且不需要不必要地在子元素上指定不同的布局细节，所以解决方案应该符合这种模式。保持css网格布局简单
考虑以下几点：
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2/span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
.selected {
width: 150%;
height: 150%;
z-index: 2;
}<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>https://jsfiddle.net/robbie_at_harvard/a3ouq711/1/
请调整造成地区二，三，四朝中间总是从左上角的扩大，而不是角？同样，最好使用通用规则而不是div.class规范特定的规则。第二个问题，如果我想要的是2x2子元素的4x4布局，点击一个元素将其扩展到3x3并将其他元素缩小到对角的1x2,2x1和1x1，那么产生这个需要什么解？
使用CSS的规模，而不是宽度和高度？ https://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-the-center-instead-of-top-left – evolutionxbox
几乎可以工作..你也可以抵消它以提供一个完整的解决方案，但抵消将不得不依赖于选定的和位置类。如果我必须使用一个很好的位置类，但我希望这个更简单的例子至少不需要这样。 –