grid layout

Class Friday, May 11, 2018

 Today’s Goal:

  • Learn how to create a layout for a webpage using CSS grid

 Today’s featured website:

 What is CSS Grid?

It’s simply another way to create a layout for your webpage, in addition to floating and positioning, two things we learned earlier this year.

Let’s quickly review this to learn a little more: https://www.w3schools.com/css/css_grid.asp

Sites using grid layout: https://www.niagarafallsusa.com/, https://gridbyexample.com/, http://www.gridexamples.com/ (collection), and https://www.cssdesignawards.com/website-gallery?feature=grid (collection). As you can see, sites using grid layout don’t have to look like actual grids!

Grid practice: Let’s one again use FreeCodeCamp and practice some grid basics (we’re not going to do all of them)