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 centre elements 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 we’ve come across so far.
Steps to use the Grid layout
- Create a Grid container by defining the size of several rows and columns. You can also let the Grid extend automatically.
- Place the Grid lines
- Attach elements to the Grid
- Define the Grid flow (optional)
- Align and justify items
- Layer elements (optional, if overlapping is needed)
Useful Resources
I’d like to list the resources I used along the way, 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 where we can look up useful properties.
CSS in Depth, Part 2 covers layout strategies.