Applying CSS grid

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

1. Creating a Grid container, by defining the size of several rows and columns, you can also let the Grid extend automatically.
2. Placing the Grid lines
3. Attaching elements to the Grid
4. Define Grid Flow (optional)
5. Aligning and Justifying items
6. Layering (optional, if overlapping is needed)

Useful Resources

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.