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.
I’d like to put the resources I’ve used during my learning, for serious learners who want to learn Grid CSS thoroughly.