Mastering CSS Grid: A comprehensive and practical guide to creating beautiful layouts with CSS Grid

Cover Page....2

Table of Contents....3

Preface....4

Part 1–Working with CSS Grid....14

Chapter 1: Understanding the Basic Rules and Structures for CSS Grid....15

Technical requirements....16

Understanding the basic rules related to CSS Grid....16

Using grid templates....32

Grid flow....38

Understanding special grid-related units, keywords, and functions....45

Using shortcuts....56

Summary....61

Chapter 2: Project Introduction: What We’ll Work on and First Tasks....63

Technical requirements....63

Introducing Awesome Analytics – our gibberish analytics tool....64

Setting up Awesome Analytics locally....66

Receiving our first task – implementing the grids....67

Exploring the code of Awesome Analytics....69

Fixing Awesome Analytics’ layout problem – a possible solution....79

Summary....84

Chapter 3: Building Advanced Grid Layouts....86

Technical requirements....86

Understanding the row axis and column axis and how to influence them....87

Arranging grid items and grid cells with alignment and justification rules....89

Defining and using advanced grid templates....108

Creating subgrids....121

Masonry layouts....124

Practicing with Awesome Analytics....127

Summary....133

Part 2 – Understanding the CSS Grid Periphery....134

Chapter 4: Understanding and Creating Responsive and Fluid Grid Layouts....135

Technical requirements....135

Understanding the challenges of designing layouts....136

Understanding the difference between adaptive, responsive, and fluid layouts....146

Learning responsive layout best practices....151

Implementing responsive and fluid layouts with CSS Grid....157

Practicing responsive layouts with Awesome Analytics....168

Summary....179

Chapter 5: Implementing Layouts with Flexbox and CSS Grid....180

Technical requirements....181

Arranging media objects....182

Arranging teasers and card elements....186

Arranging forms and form elements....190

Building page layouts and partials....199

Practicing with Awesome Analytics....210

Summary....215

Chapter 6: Benefits of Grid Layouts and When Not to Use Them....217

Technical requirements....217

Cherishing the benefits of grid layouts....218

Understanding the drawbacks of grid layouts....223

Learning about some alternatives for grid layouts....233

A list to help us decide....237

Summary....238

Part 3 – Exploring the Wider Ecosystem....239

Chapter 7: Polyfilling CSS Grid’s Missing Features....240

Technical requirements....241

Understanding the tools to write a CSS polyfill from scratch....242

Creating a polyfill for subgrid....249

Creating a polyfill for masonry....257

Creating a polyfill for additional pseudo-classes....266

Animating grids....275

Understanding why we should not use polyfills....277

Summary....277

Chapter 8: Grids in the Wild – How Frameworks Implement Grids....279

Technical requirements....280

Learning how Tailwind implements grids....281

Learning how Bootstrap implements grids....290

Learning how Foundation implements grids....293

Learning how Bulma.io implements grids....298

Learning how UIkit implements grids....302

Learning how Pure.css implements grids....306

Learning how Tachyons implements grids....310

Learning how Cutestrap implements grids....311

Learning how other frameworks don’t implement grids....313

Practising Bootstrap and Tailwind frameworks with AwesomeAnalytics....314

Summary....322

Part 4 – A Quick Reference....324

Chapter 9: Quick Reference and Cheat Sheet....325

Technical requirements....325

Important terms and their definitions....326

CSS Grid attributes, values, functions, and units....329

CSS Grid recipes for everyday use cases....345

Grid design best practices and do’s and don’ts....354

A framework cheat sheet for the Holy grail layout....356

Summary....361

Index....362

Why subscribe?....374

Other Books You May Enjoy....376

Packt is searching for authors like you....379

Share your thoughts....379

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.

What You Will Learn:

• Enhance your CSS Grid skills by mastering both its fundamental and advanced concepts
• Combine flexbox and CSS Grid seamlessly to produce stunning and responsive page layouts
• Discover the potential of complex grid layouts to improve your next project
• Examine how frameworks utilize CSS Grid to create reusable components
• Leverage the benefits of grid-based layouts to create visually appealing websites
• Create custom polyfills and learn when to use grid layouts
• Build dynamic and user-friendly web projects using CSS Grid's responsive design capabilities

Who this book is for:

This book is for web developers and designers who want to learn CSS Grid and improve their layout design skills. This book will also be a valuable resource for CSS developers seeking to advance their skills to the most proficient level. Additionally, this book will serve as an excellent guide for those who wish to expand their toolset to include flexbox and grids.