můj css grid sandbox

by Petr Haluza

HTML

<section id="page">
  <div id="q1">q1</div>
  <div id="q2">q2</div>
  <div id="q3">q3</div>
  <div id="q4">q4</div>
  <div id="q5">q5</div>
  <div id="q6">q6</div>
</section>

CSS

#page {
  display: grid;
  width: 100%;
  height: 300px;
  grid-template-areas: "a1 a2 a2 a2"
                       "a1 a5 a3 a3"
                       "a4 a5 a6 a6";
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}

#page > #q1 {  grid-area: a1;  background-color: #8ca0ff;}
#page > #q2 {  grid-area: a2;  background-color: #ffa08c;}
#page > #q3 {  grid-area: a3;  background-color: #ffff64;}
#page > #q4 {  grid-area: a4;  background-color: #8cffa0;}
#page > #q5 {  grid-area: a5;  background-color: #8cff50;}
#page > #q6 {  grid-area: a6;  background-color: #8c0f00;}


#page:hover {
  grid-template-areas: "a1 a2 a2 a2"
                       "a1 a3 a3 a3"
                       "a1 a4 a5 a6";

}