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

我认为很难有一个通用的解决方案，因为 4 个块需要以不同的方式移动。顺便说一下，这里的解决方案涉及很少的 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>

Answer 2

您可以使用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>