I’ve been trying to use Flexbox and Grid layout recently whenever I need to write some CSS for layout. It has been a widely used practice to use Flexbox to put some elements in the center vertically and horizontally, or to fill elements into a container like a navigation bar. However, Flexbox itself is not sufficient for a page layout.
Grid layout, by contrast, is a generalized layout system. With something that looks a bit similar to table layout, or Bootstrap Grid layout, it can do much more. A Grid layout allows components to be put independently or even overlapping. We can nest grids in grids, or attach flexbox to a grid. In short, it’s the layout system that can do most of the complex layout jobs that we’ve met so far.
Steps to use the Grid layout
- Creating a Grid container, by defining the size of several rows and columns, you can also let the Grid extend automatically.
- Placing the Grid lines
- Attaching elements to the Grid
- Define Grid Flow (optional)
- Aligning and Justifying items
- Layering (optional, if overlapping is needed)
I’d like to put the resources I’ve used during my learning, for serious learners who want to learn Grid CSS thoroughly.
- A Complete Guide to Grid, together with Flexbox is the place I’ll go to for learning and reference.
- MDN Docs for CSS Grid Layout is the place we go through useful properties.
- CSS in Depth, Part 2 is talking about layout strategies.