Tiggles ツ
12/11/2018 - 8:56 PM

CSS Grid Basic Syntax

basic css grid stuff

Codepen with staggering grid item sizes in a 3x15 : https://codepen.io/tiggle/pen/MZJxzg

code.scss
content_copyfile_download
.container {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  grid-template-rows: 1fr;
  display: -ms-grid;
  -ms-grid-columns: 2fr 6fr 2fr;
  -ms-grid-rows: 1fr;
  .item1 {
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .item2 {
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .item3 {
    grid-row: 1;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}