Mastering CSS Grid

Learn the basics and advanced aspects by creating a project using CSS Grid and dive into the specifications of using CSS grid concepts

Key Features

• Explore the differences between grid boxes and block containers
• Create block-level grids, inline grids, and even nest grids inside grids
• Learn best practices for attaching elements to your layout, using explicitly defined grid lines or grid area

Book Description

CSS Grid fills a long-existing gap in tools to use real grids on the web. Back in the old days, we used make-shift grids made with table layouts, then used a set of floating elements with fixed widths to achieve different-sized columns. The introduction of flexbox helped, but ultimately, CSS Grid gave us what we've longed for so long: Real responsive grids done with pure CSS.

You will learn the basics and advanced aspects of CSS Grid through practice. You will learn how to implement responsive layouts and best practices when using grids in any design. You will know how flexbox can play with CSS Grid, and in the end, you will have our own beautiful and usable, responsive web project you can use as a reference and improve our skills further. You will also look at how frameworks use CSS Grid to build reusable components and how you can rebuild and polyfill CSS Grid for browsers that don't yet fully support it and learn how CSS Grid works in-depth. Finally, a quick reference and cheat sheet at the end will make this book a handy companion for every frontend dev, novice or seasoned.

So, let's dive into all the nooks and crannies of CSS Grid and create beautiful layouts for all kinds of web projects, large or small and become a Pro at CSS Grid.

What you will learn

• Improve your skills with basic and advanced CSS Grid concepts
• Use flexbox and CSS Grid play together to create beautiful responsive layouts
• Explore advanced grid layouts and how they can benefit your next project
• How frameworks use CSS Grid to create reusable components
• Learn the benefits of grid layouts and create beautiful websites
• Create your own polyfills and understand when not to use grid layouts
• Build responsive and usable web project using CSS Grid

Who This Book Is For

This book is for anyone who has some experience with HTML and CSS, but might not be familiar with some of the newer concepts and want to uncover the secrets of mastering CSS grid to creating amazing web pages.

CSS developers who want to update their CSS skills to the most modern level. CSS developers who want to expand their toolset to flexbox, Grids

Table of Contents

1. Basic rules for CSS grids
2. Project introduction: What we'll work on and first tasks
3. Advanced grid layouts
4. Responsive CSS grids
5. Implementing layouts with flexbox and CSS grid
6. Benefits of grid layouts and when not to use them
7. Polyfilling
8. CSS Grid in the wild: How frameworks use it
9. Quick reference and cheat sheet