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.

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
Benjamin Frain
Sep, 2022 | 498 pages
Small book image
The HTML and CSS Workshop
Lewis Coulson | Matt Park | Marian Zburlea | Brett Jephson | Rob Larsen
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

Learning how Tachyons implements grids

Although Tachyons has not been actively maintained for a few years, it remains a popular framework that is loved by many. Its functional (as the developers used to call it) approach feels very much like a predecessor of Tailwind’s core principle of utility-first.

We can see the landing page of the Tachyons website in the following screenshot:

Figure 8.14 – The Tachyons landing page

Figure 8.14 – The Tachyons landing page

A still-open pull request on GitHub from August 2022 implements support for CSS Grid but was never officially released. However, the latest stable version supports Flexbox, and the documentation offers examples of float-based grids built with utility classes.

Funnily enough, the Flexbox syntax is almost identical to that of Tailwind, and, according to the pull request, parts of the CSS Grid implementation would have followed suit.

Generally, Tachyons grids combine the fl class, which stands for float: left;, and a...

Previous Section
End of Section 9
Next Section