UVA Web Design - Week 7

What can I say except - CSS GRID LAYOUT 

Photo by Romanov on Unsplash

Grid Layout is a way to create a two-dimensional page grid to organize HTML content.  Looking at grid layout examples I knew I wanted to use the technique but it took a bit to figure out how it all worked.  Once I got it going, I was able to organize my site content the way I wanted it.

Things to consider:  Grid is for two-dimensional layouts - both horizontal and vertical.  You can create a grid container that has both rows and columns, then you can assign HTML elements to particular rows, parts of rows, and one or more columns.  

It took me a minute to understand the difference between grid and flexbox.   Flexbox is ONE dimensional, meaning it can define a row OR a column but not both.

Both grid and flexbox can auto-align contents and you can reassign grid rows when you define @media for different screen sizes.

Here's a link to some grid information:
https://www.w3schools.com/css/css_grid.asp

Here is an excerpt from one of my grids:

body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto 75px;
    }

header {grid-column: 1 / 3;

             grid-row: 1 / 2;

             }

When troubleshooting the grid, I used Chrome's developer tools to "see" the grid and how my HTML elements were assigned to the rows and columns.  In the developer tools, you can click the GRID button on the HTML element and the tool will draw the grid lines.  This tool helped me trial and error troubleshoot.