Chapter 8: Stupid Grid Tricks
In this chapter, we'll look at overlapping grid cells, Grid's impact on margin, and the minmax() function.
8a: Overlapping grid cells and how they work
It is possible to have grid cells overlap for various effects in your document. One of my favorite examples of this is having a figure caption overlap its figure image.
8b: Overlapping grid cells as art
Grid may be used to create art as well. Display images on your site in new and interesting ways, without using Photoshop!
We will build the following layout (non-responsive):
8c: You try it: overlapping grid cells
See if you can use two images to create this animation, using Grid and CSS animation.
Suggested approach:
- Make the image Pluto2 completely cover the Pluto1 image using Grid.
- Use CSS animation to make the Pluto2 image fade in and out.
8d: Margin and Grid
More of a demo than an exercise, explore the impact of a Grid layout on block (top and bottom) margins. Normally these kinds of margins collapse, but not with Grid.
8e: minmax()
minmax(min, max) defines a size range greater than or equal to min and less than or equal to max. Learn how we can apply this to our grid systems to give Grid some Flexbox flavor.
Ahmad Shadeed has some great advice on this topic.