Question

请看下面的例子。我正在学习css网格。整个目的是保持简单，不需要在子元素上不必要地指定不同的布局细节，因此解决方案应该符合这种模式。

鉴于以下内容：

＆＃13;

function toggle(t) {
  document.querySelectorAll('div').forEach(el =>
    el.classList[0] === t.classList[0] ?
    el.classList.toggle('selected') :
    el.classList.remove('selected'))
}

＆＃13;

: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;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/robbie_at_harvard/a3ouq711/1/

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

第二个问题，如果我想要一个4x4布局的2x2子元素，其中点击一个元素将其扩展为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

我认为很难有一个通用的解决方案，因为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>

保持css网格布局简单

2 个答案: