CSS Grid Layout

These examples were developed after reading the book Get Ready for CSS Grid Layout by Rachel Andrew. They are intended to be used as examples for my students (and other readers of my blog postings). I particularly like the quote by Eric Meyer in the forward:

"Grid Layout is to Flexbox as PNG is to BMP, and then some."

In order to view these examples in a browser, your choices are presently limited (January, 2016). I recommend using Canary. You must also enable chrome://flags Experimental Web Platform Features. Firefox nightly builds may also work. Your typical browser (Edge, Firefox, Chrome, Opera, Safari) will likely not work to view these pages as intended. CSS Grid is experimental at this point. Hopefully this will change before the year (2016) is out.

Open each example and view the source code. I have included both CSS and HTML in a single file to meake it easier for you to follow what is happening.

• Example 1 - Display Grid fundamentals with hard coded column and row start and end values (to help you learn, not a recommended approach).
• Example 1a - Display Grid fundamentals with hard coded column and row start and end values (to help you learn, not a recommended approach). Class .seven row start and end values changed. Notice how easily it is to move the placement of that associated division to the top row of the grid.
• Example 2 - Using shorthand codes and named grid lines (instead of hard coded numbers).
• Example 3 - Using grid template with named areas. This is typically how one might use a grid layout. Note how easily the text flows. Of course, you may wonder whether this works with media queries - yes!