Introducing CSS Grid
Jen will give a quick overview of Grid, including history, browser support, and syntax.
The best reference source for Grid is at CSS Tricks.
Mondrian Painting Exercise
Jen will walk through an interactive demo in which you'll reconstruct a painting by Piet Mondrian in CSS Grid. Copy the painting as closely as possible, given what you know about CSS Grid.
Note: You will not be 100% perfect -- the painting isn't 100% perfect! But you will be very close.
9A: Line-based grid layout
9B: Line-based grid layout with span notation
Grid will always try to lay out information from the upper left to the lower right (at least in left-to-right systems), with each grid item occupying one row and one column.
If you want to override that distribution, you must provide directions.
In example 9A, we have called out the location of each element, row and column.
In 9B, we reduce the number of declarations, using Grid's tendency to place most of our grid items correctly, and using our declarations to override only what's needed.
Grid System with CSS Grid
Part 10A: Desktop-only system
We'll create the same 4-column grid system that we did with Flexbox, using the same instructions as before -- the HTML comments will tell you how many boxes per row, with a total of 4 columns.
However, this time, you should not need to mark each row individually. Because this is Grid, you should have enough markup here to set this up without adding extra divs.
You may need to add some classes to designate how large each box should be. Consider what your default value is - those boxes may not need a class.
Part 10B: Mobile-first responsive system
Now we'll add media queries to make our grid system mobile-first.
Starting CodePen (continues from the 10A finished state)
Figure Caption & Figure Caption with CSS Grid
Chapter 11: <figure> and <figcaption> with Grid
In the Flexbox unit, we used relative and absolute positioning to overlap the captions on the images.
However, we can also use Grid to do this... and it's much easier.
Bonus: Combining Grid Cells and Animation
Here we have two figures occupying the same grid cell.
We can animate the top photo to fade in and out, revealing the photo underneath.
What else could you do with overlapping CSS grid cells?
CSS Grid Exercises
There are two challenges to tackle, depending on your time.
Part 12A - Mosaic grid layout
In the begin folder, you're given some starting HTML and CSS.
Using CSS Grid, lay out the page as you see in the screenshots for desktop and mobile dimensions.
Hints:
- You may want to steal some styling from the Flexbox layouts we did yesterday with similar content.
- You may want to look at some of the work we did earlier and apply it to this problem.
- Start with the number of rows and columns needed, then worry about how to fit the images into those spaces.
Part 12B - Integrate mosaic in home page
I've given you yesterday's final end state of our Flexbox work.
Now try swapping out the "collections" section at the bottom of the home page for the "pop art" mosaic you just created with Grid.
Magazine Layouts
At this point, we've replicated what we can do with Flexbox. Now we can push our Grid layouts a little further with grid area notation and getting creative with our boxes in two dimensions.
Starting CodePen (now with kittens!)
Card Layouts
Like navbars, cards are everywhere on the web. They're also a compact and useful piece of content that contains all kinds of interesting styling challenges.
Here we'll work on styling a suite of 4 cards in CodePen, with an eye to applying it to our larger website shortly.
Final Project
Now that you have a sense of how Flexbox and Grid work, build an inside page for this website.
We've pulled some photos from Pexels from Sharon McCutcheon.
Build an inside page that would match the home page for this website, based on the photos and text we've given you.
- We've given you the most recent version of the Flexbox/Grid web page we've built over the workshop. You may have elements from here that you want to reuse.
- Consider how you might lay out the photos and artist information in an attractive way. I've given you some screenshots of my answers, but you're welcome to try something different.
- If you don't like the images I gave you, or if you want more or different photos, visit Sharon's page at Pexels to download different or additional photos.
- Sketch a quick drawing of what the page might look like before you start coding. Pencil and paper are fine - there's no need to make a Figma drawing unless you really want to!
Technical considerations
- Do you need responsive images? Do you need to resize these images in some way?
- Where should you use Grid and where should you use Flexbox? (Should you use one or the other?) See if you can state why you make your choice, beyond "I like Flexbox better" or "Grid is for layouts."
- What elements will you recycle from the original design, if any?
