More Flexible Grid Hover

by MichalSmoczynski

HTML

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

SCSS

$grid-gap: 10px;
$grid-gap-sides: $grid-gap * 2;
$columns: 3;
$rows: 2;
$first-item: calc( 30% - ( #{$grid-gap-sides} / #{$columns} ) );
$second-item: calc( 20% - ( #{$grid-gap-sides} / #{$columns} ) );
$third-item: calc( 50% - ( #{$grid-gap-sides} / #{$columns} ) );
$row-height: calc( 50% - ( #{$grid-gap} / #{$rows} ) );

grid-container {
  display: inline-grid;
  grid-template-columns: $first-item $second-item $third-item;
  grid-template-rows: repeat($rows, $row-height );
  height: 230px;
  transition: 2s;
  width: calc( 300px + 20vw );
  grid-gap: $grid-gap;
  padding: $grid-gap;
  background-color: black;
  box-sizing: border-box;
}

grid-container:hover {
  background-color: red;
  height: 130px;
  transition: all 2s;
  width: calc( 150px + 10vw );
}

grid-item {
  background-color: lightgreen;
}