Book Image

Mastering CSS Grid

By : Pascal Thormeier
4 (2)
Book Image

Mastering CSS Grid

4 (2)
By: Pascal Thormeier

Overview of this book

CSS Grid has revolutionized web design by filling a long-existing gap in creating real, dynamic grids on the web. This book will help you grasp these CSS Grid concepts in a step-by-step way, empowering you with the knowledge and skills needed to design beautiful and responsive grid-based layouts for your web projects. This book provides a comprehensive coverage of CSS Grid by taking you through both fundamental and advanced concepts with practical exercises. You'll learn how to create responsive layouts and discover best practices for incorporating grids into any design. As you advance, you'll explore the dynamic interplay between CSS Grid and flexbox, culminating in the development of a usable responsive web project as a reference for further improvement. You'll also see how frameworks utilize CSS Grid to construct reusable components and learn to rebuild and polyfill CSS Grid for browsers that don't fully support it yet. The concluding chapters include a quick reference and cheat sheet, making this book an indispensable resource for frontend developers of all skill levels. By the end of this book, you'll have thoroughly explored all aspects of CSS Grid and gained expert-level proficiency, enabling you to craft beautiful and functional layouts for web projects of any size.
Table of Contents (16 chapters)
1
Part 1–Working with CSS Grid
5
Part 2 – Understanding the CSS Grid Periphery
9
Part 3 – Exploring the Wider Ecosystem
12
Part 4 – A Quick Reference

Summary

We now know some best practices for responsive and fluid designs and understand the struggles of design experts when coming up with designs. As developers, we understand the technical possibilities of design, but knowing some of the design principles and thought processes of UX experts helps in communicating with them.

We can give educated opinions on inclusivity and accessibility and ask the right questions when talking to stakeholders. We can ultimately support the entire team with our broad expertise. Since we’ve practiced creating responsive layouts and coming up with solutions, we’ve also practiced making informed decisions.

In the next chapter, we’ll get back into the more technical aspects of CSS Grid and compare it to Flexbox. Then, we’ll examine the limits of what’s possible with CSS Grid and Flexbox and learn how to use one to support the other. Finally, we’ll learn about the similarities and differences between Flexbox...