Book Image

Mastering CSS Grid

By : Pascal Thormeier
4.3 (3)
Book Image

Mastering CSS Grid

4.3 (3)
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.

Related Content you might be interested in

Current Title:

Small book image
Mastering CSS Grid
Pascal Thormeier
Jun, 2023 | 330 pages
Small book image
Responsive Web Design with HTML5 and CSS
Mr. Benjamin Frain
Sep, 2022 | 498 pages
Small book image
The HTML and CSS Workshop
Marian Zburlea | SudarshanReddy Kurri | Adam Rosson | Brett Jephson | Danial Pervaiz | Rob Larsen | Terry O'Brien | Lewis Coulson | Matt Park | Tiffany Ford | David Ames
Nov, 2019 | 700 pages
Small book image
Webflow by Example
Ali Rushdan Tariq
Dec, 2021 | 356 pages
Table of Contents (16 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share your thoughts
Download a free PDF copy of this book
1
Part 1–Working with CSS Grid
Part 1–Working with CSS Grid
Free Chapter
2
Chapter 1: Understanding the Basic Rules and Structures for CSS Grid
Chapter 1: Understanding the Basic Rules and Structures for CSS Grid
Technical requirements
Understanding the basic rules related to CSS Grid
Using grid templates
Grid flow
Understanding special grid-related units, keywords, and functions
Using shortcuts
Summary
3
Chapter 2: Project Introduction: What We’ll Work on and First Tasks
Chapter 2: Project Introduction: What We’ll Work on and First Tasks
Technical requirements
Introducing Awesome Analytics – our gibberish analytics tool
Setting up Awesome Analytics locally
Receiving our first task – implementing the grids
Exploring the code of Awesome Analytics
Fixing Awesome Analytics’ layout problem – a possible solution
Summary
4
Chapter 3: Building Advanced Grid Layouts
Chapter 3: Building Advanced Grid Layouts
Technical requirements
Understanding the row axis and column axis and how to influence them
Arranging grid items and grid cells with alignment and justification rules
Defining and using advanced grid templates
Creating subgrids
Masonry layouts
Practicing with Awesome Analytics
Summary
5
Part 2 – Understanding the CSS Grid Periphery
Part 2 – Understanding the CSS Grid Periphery
6
Chapter 4: Understanding and Creating Responsive and Fluid Grid Layouts
Chapter 4: Understanding and Creating Responsive and Fluid Grid Layouts
Technical requirements
Understanding the challenges of designing layouts
Understanding the difference between adaptive, responsive, and fluid layouts
Learning responsive layout best practices
Implementing responsive and fluid layouts with CSS Grid
Practicing responsive layouts with Awesome Analytics
Summary
7
Chapter 5: Implementing Layouts with Flexbox and CSS Grid
Chapter 5: Implementing Layouts with Flexbox and CSS Grid
Technical requirements
Arranging media objects
Arranging teasers and card elements
Arranging forms and form elements
Building page layouts and partials
Practicing with Awesome Analytics
Summary
8
Chapter 6: Benefits of Grid Layouts and When Not to Use Them
Chapter 6: Benefits of Grid Layouts and When Not to Use Them
Technical requirements
Cherishing the benefits of grid layouts
Understanding the drawbacks of grid layouts
Learning about some alternatives for grid layouts
A list to help us decide
Summary
9
Part 3 – Exploring the Wider Ecosystem
Part 3 – Exploring the Wider Ecosystem
10
Chapter 7: Polyfilling CSS Grid’s Missing Features
Chapter 7: Polyfilling CSS Grid’s Missing Features
Technical requirements
Understanding the tools to write a CSS polyfill from scratch
Creating a polyfill for subgrid
Creating a polyfill for masonry
Creating a polyfill for additional pseudo-classes
Animating grids
Understanding why we should not use polyfills
Summary
11
Chapter 8: Grids in the Wild – How Frameworks Implement Grids
Chapter 8: Grids in the Wild – How Frameworks Implement Grids
Technical requirements
Learning how Tailwind implements grids
Learning how Bootstrap implements grids
Learning how Foundation implements grids
Learning how Bulma.io implements grids
Learning how UIkit implements grids
Learning how Pure.css implements grids
Learning how Tachyons implements grids
Learning how Cutestrap implements grids
Learning how other frameworks don’t implement grids
Practising Bootstrap and Tailwind frameworks with AwesomeAnalytics
Summary
12
Part 4 – A Quick Reference
Part 4 – A Quick Reference
13
Chapter 9: Quick Reference and Cheat Sheet
Chapter 9: Quick Reference and Cheat Sheet
Technical requirements
Important terms and their definitions
CSS Grid attributes, values, functions, and units
CSS Grid recipes for everyday use cases
Grid design best practices and do’s and don’ts
A framework cheat sheet for the Holy grail layout
Summary
14
Index
Index
Why subscribe?
15
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share your thoughts

To get the most out of this book

We recommend some knowledge of the basics and advanced CSS and JavaScript features, such as custom CSS properties or Promises. Knowing how Flexbox works is also recommended. A solid knowledge of HTML is assumed.

Software/hardware covered in the book

Operating system requirements

CSS Grid

Windows, macOS, or Linux

Flexbox

PostCSS

JavaScript

Since these technologies primarily run in the browser, they can be used on any operating system. NodeJS, used to execute some code snippets and create a web server for the accompanying project, and NPM, used to install JavaScript dependencies, are available for all major operating systems too.

To handle different versions of NodeJS, either a Docker setup or Node Version Manager (NVM) is recommended. We also require a modern browser that supports CSS Grid and offers grid tooling and a grid debugger. Having multiple browsers installed helps us to see the differences in the development tools and get used to them.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Previous Section
Next Section