Skip to content

Instantly share code, notes, and snippets.

@Shurlow

Shurlow/grid.md

Last active February 21, 2018 14:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Shurlow/d3957dfd11364bd5642d21d8e90751e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Shurlow/d3957dfd11364bd5642d21d8e90751e6 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid Breakout
Raw
grid.md

CSS Grid Breakout Notes

Objectives

  • Explain what a CSS grid system is
  • Explain how the display: grid property is used
    • Describe the following properties: grid-column, grid-row, & grid-auto-rows
  • Use the built-in CSS grid properties to create dynamic layouts

Explain what a CSS grid system is

Turn to your neighbor and explian what a grid system is in CSS. What properties does it have? How is it useful?

Explain how the display: grid property is used

Spend a few minutes researching the new CSS grid layout. In particular, look into the grid-column, grid-row, & grid-auto-rows properties.

Resources:

Use the built-in CSS grid properties to create dynamic layouts

Fork and clone this repo: https://github.com/gSchool/css-grid-example. Edit the existing index.html & style.css files to match the example image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment