Click to rearrange grid items

PHOTO EMBED

Wed Dec 30 2020 19:33:23 GMT+0000 (UTC)

Saved by @longshot #css #javascript

//HMTL

<div class="container">

 <div id="a" class="box">Div A</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>
<div id="d" class="box">Div D</div>
<div id="e" class="box">Div E</div>
<div id="f" class="box">Div F</div>

</div>


//CSS
body {
  font-family: arial;
  font-weight: 600;
  color: white;
  font-size: 2em;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10%;
  text-align: center;
  grid-gap: 40px;
}

.box {
   background-color: green;
   padding: 20px;
  
}

#a {


}

#a:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#a:hover ~ #b {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#b:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#b:hover ~ #a {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}
content_copyCOPY