CSS Grid Resources

Logo
Other CSS Grid Demos & Examples

Learn 'Grid' with these video tutorials

Learning a new technolgy can be a bit of challenge. The videos below, in combination with the visual interface of CSS Grid Builder, caused a big cheer in the CoffeeCup community. They have helped many get started with the best new technolgy the web has seen in the last decade. We will be adding more in the next weeks — make sure to subscribe to our newsletter so we can keep you posted!

Episode 1: Setting up CSS Grid layouts
CSS Code for setting up a grid
-----------

  .demo-grid {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: auto;
  }

Episode 2: The implicit grid, track sizing and the FR unit.
CSS Code for sizing grid rows, columns and a gutter
-----------

  .demo-grid {
    display: grid;
    grid-template-columns: repeat (2, 1fr);
    grid-template-rows: auto 3fr 2fr 140;
    grid-row-gap: 10px;
    grid-columns-gap: 10px;
  }

Episode 3: Creating the Holy Grail layout using CSS Grid Template Areas
Example CSS Code for defining template areas
-----------

  .demo-grid {
    display: grid;
    grid-template-areas:
    'header' 'navigation' 'main' 'aside' 'footer';
    grid-template-columns: 1fr;
    grid-template-rows: 120px 101px 1fr 120px 80px;
    grid-row-gap: 1px;
    grid-column-gap: 1px
  }