css grid layout einfach halten

Question

Bitte sehen Sie sich das folgende Beispiel an. Ich lerne CSS-Gitter. Der ganze Zweck besteht darin, die Dinge einfach zu halten und keine unnötigen Layoutdetails auf den Kindelementen zu spezifizieren, daher sollten die Lösungen diesem Muster entsprechen.

Angesichts der folgenden:

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/

Bitte stellen Sie die Bereiche, zwei zu verursachen, drei und vier zur Mitte hin zu erweitern, statt immer von der linken oberen Ecke? Auch hier bevorzugt mit generischen Regeln und nicht mit spezifischen Spezifikationen der div.class. Die zweite Frage, wenn ich stattdessen ein 4x4-Layout von 2x2 Kindelementen wollte, wo das Klicken auf ein Element es zu 3x3 erweitert und die anderen zu 1x2, 2x1 und 1x1 in der gegenüberliegenden Ecke kontrahiert, was notwendig ist, um dies zu erzeugen Lösung?

Answer 1

Sie könnten transform:scale(1.5) verwenden und mit transform-origin positionieren.

Es wäre auf dem Gitter abhängig spezifische CSS-Regeln erfordern (i :nth-child verwenden, um jedes Element Ziel)

Für 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

Einsatz

Ich denke, es ist schwierig, eine allgemeine Lösung zu haben, da die 4 Blöcke auf unterschiedliche Art und Weise bewegt werden müssen. By the way hier eine Lösung, die wenige CSS-Änderungen beinhalten.

Ich weiß, dass Sie ein generisches wollen, aber ich denke, dass in allen Fällen einige Besonderheiten haben (wie die Farbe und den Inhalt)

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>