grid布局

grid 布局实践

by Robbie Yang

HTML

<div class="game">
    <div class="game_item game_item-1"></div>
    <div class="game_item game_item-2"></div>
    <div class="game_item game_item-3"></div>
    <div class="game_item game_item-4"></div>
    <div class="game_item game_item-5"></div>
    <div class="game_item game_item-6"></div>
  </div>

SCSS

$width: 117px;
$height: 176px;
.game {
  display: flex;
  justify-content: center;
  display: grid;
  grid-template-columns: $height $width $width $width $width;
  grid-template-rows:auto auto auto auto auto auto auto auto;
  &_item {
    width: $width;
    height: $width;
    text-align: center;
    line-height: 90px;
    color: rgb(226, 211, 211);
    background-color: transparent;
    &-subitem {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background-color: #fff;
    }
    &-subitem-active {
      background-color: rgb(195, 195, 28);
    }
  }
  &_item-1,&_item-21 {
    width: $height;
  }
  &_item-12,&_item-16 {
    height: $height;
  }
  &_item-6 {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
  }
  &_item-7 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
  }
  &_item-8 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
  }
  &_item-9 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }
  &_item-10 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  &_item-11 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  &_item-12 {
    grid-column: 2 / 3;
    grid-row: 5 / 7;
  }
  &_item-13 {
    grid-column: 2 / 3;
    grid-row: 7 / 9;
  }
  &_item-14 {
    grid-column: 3 / 4;
    grid-row: 7 / 9;
  }
  &_item-15 {
    grid-column: 4 / 5;
    grid-row: 7 / 8;
  }
  &_item-16 {
    grid-column: 5 / 6;
    grid-row: 7 / 10;
  }
  &_item-17 {
    grid-column: 5 / 6;
    grid-row: 10 / 11;
  }
  &_item-18 {
    grid-column: 4 / 5;
    grid-row: 10 / 11;
  }
  &_item-19 {
    grid-column: 3 / 4;
    grid-row: 10 / 11;
  }
  &_item-20 {
    grid-column: 2 / 3;
    grid-row: 10 / 11;
  }
  &_item-21 {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
  }
  &_item-22 {
    // height: 100px;
    grid-column: 1 / 2;
    grid-row: 8 / 10;
  }
  &_item-23 {
    grid-column: 1 / 2;
    grid-row: 6 / 8;
  }
  &_item-24 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  &_item-25 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  &_item-26 {
    grid-column:...