
.grid-basic {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-gap: 30px;
}
.grid-basic > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid-basic > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.grid-basic > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

/* Must work with repeat function */
.grid-repeat {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 2fr 30px 1fr 30px 2fr 30px 1fr 30px 2fr 30px 1fr 30px 2fr;
  grid-template-columns: repeat(4, 1fr 2fr);
  -ms-grid-rows: auto 30px auto;
  grid-template-rows: repeat(2, auto);
  grid-gap: 30px;
}
.grid-repeat > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid-repeat > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.grid-repeat > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.grid-repeat > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.grid-repeat > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.grid-repeat > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.grid-repeat > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.grid-repeat > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

/* Complex case */
.grid-complex {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5px minmax(100px, 200px) 5px minmax(100px, 200px) 5px 1fr;
  grid-template-columns: 1fr repeat(2, minmax(100px, 200px)) 1fr;
  -ms-grid-rows: 100px 30px auto 30px auto;
  grid-template-rows: 100px repeat(2, auto);
  grid-gap: 30px 5px;
}
.grid-complex > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid-complex > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.grid-complex > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.grid-complex > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.grid-complex > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.grid-complex > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.grid-complex > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.grid-complex > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
.grid-complex > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.grid-complex > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.grid-complex > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.grid-complex > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}

/* Must work inside media */
@media (min-width: 400px) {
  .grid-media {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-gap: 30px;
  }
  .grid-media > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .grid-media > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .grid-media > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
}

/* Must consider autoflow value */
.grid-flow-column {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto 30px auto;
  grid-template-rows: auto auto;
  grid-gap: 30px;
}
.grid-flow-column > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid-flow-column > *:nth-child(2) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.grid-flow-column > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.grid-flow-column > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.grid-flow-column > *:nth-child(5) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.grid-flow-column > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

/* Show warning if rows are not defined
   and dense value is used */
.grid-warning-dense {
  grid-auto-flow: column dense;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Show warning autoflow used without rows/columns */
.grid-warning-autoflow {
  grid-auto-flow: column;
}

.grid-autoplace-disabled {
  /* autoprefixer grid: no-autoplace */
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-gap: 30px;
}

.grid-autoplace-gap-warn {
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}