保持CSS网格布局简单

Question

请看下面的例子。 我正在学习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/

请调整以使区域2、3和4向中间扩展而不是总是从左上角扩展？ 同样，最好使用通用规则，而不是特定于div.class规范的规则。

第二个问题，如果我想改用2x2子元素的4x4布局，单击一个元素将其扩展为3x3，然后将另一个元素收缩到对角的1x2、2x1和1x1，那么生成此解决方案需要什么？

Answer 1

您可以使用transform:scale(1.5)并使用transform-origin对其进行定位。

根据网格，将需要特定的CSS规则（ 我使用:nth-child定位每个元素 ）

2x2使用

main div:nth-child(1){transform-origin: top left;}
main div:nth-child(2){transform-origin: top right;}
main div:nth-child(3){transform-origin: bottom left;}
main div:nth-child(4){transform-origin: bottom right;}

.selected {
  transform:scale(1.5);
  z-index: 2;
}

---

 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 } main div:nth-child(1) { transform-origin: top left; } main div:nth-child(2) { transform-origin: top right; } main div:nth-child(3) { transform-origin: bottom left; } main div:nth-child(4) { transform-origin: bottom right; } .selected { transform: scale(1.5); 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> 

Answer 2

我认为很难有一个通用的解决方案，因为这四个模块需要以不同的方式移动。 顺便说一下，这里的解决方案几乎不需要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 { position:relative; 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; transition:0.5s; } .one { background: red; } .two { background: green; right:25%; } .three { background: blue; bottom:25%; } .four { bottom:25%; right:25%; } .selected { position:relative; width:150%; height:150%; } 

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