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仕様に固有の規則ではなく、一般的な規則を使用することが好ましい。

2番目の質問ではなく、1つの要素をクリックすると3x3に拡大し、もう1つを反対の角に1x2,2x1、1x1に縮小した2x2子要素の4x4レイアウトが必要な場合は、これを生成するために必要なもの溶液？

Answer 1

transform:scale(1.5)を使用し、transform-originと位置付けることができます。

それは2x2の使用のため

（iは各要素を標的とする:nth-childを使用）グリッドに応じて、特定のCSSルールを必要とするであろう

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>