css grid test

css grid test.markdown

css grid test

"G for Google"

A Pen by GSSxGSS on CodePen.

License.

index.html

.area
  .g
  .o_
  .o
  .g_
  .l
  .e

style.css

@use cssnext;

@use postcss-simple-vars;

$unit: 60px;
$count: 5;
$red: #ea4335;
$orange: #FF9800;
$yellow: #fbbc05;
$green: #34a853;
$cyan: #00BCD4;
$blue: #4285f4;

$distance: 20px;

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}

.area {
  display: grid;
  width: calc($count * $unit);
  height: calc($count * $unit);
  padding: $unit;
  border-radius: 50%;
  box-shadow: $distance $distance $distance #bdbdbd;
  background: white;
  transition: all 1s ease-out;
  grid-template-rows: repeat($count, $unit);
  grid-template-columns: repeat($count, $unit);
  grid-template-areas:
    ".  g  g  g  . "
    "o_ .  .  .  . "
    "o  .  e  e  . "
    "o  .  .  .  l "
    ".  g_ g_ g_ . ";
}
.area:hover {
  transform: translate($distance, $distance);
  box-shadow: 0 0 0 #9e9e9e;
}
.g {
  grid-area: g;
  background: $red;
}
.o_ {
  grid-area: o_;
  background: $orange;
}
.o {
  grid-area: o;
  background: $yellow;
}
.g_ {
  grid-area: g_;
  background: $green;
}
.l {
  grid-area: l;
  background: $cyan;
}
.e {
  grid-area: e;
  background: $blue;
}
.x {
  grid-area: x;
  background: #9e9e9e;
}