CSS Grid is revolutionizing web design.
For the last 20 years, we have used CSS to lay out web pages. However, CSS has always been missing some key functionality. Designers had to rely on workarounds, such as tables, floats, and positioning.
CSS Grid is different and better.
CSS Grid allows you to create a grid-based layout system, using columns and rows. You don't have to use any workarounds. You don't have to use different hacks for different browsers.
By the way, did I mention that the future of Joomla is CSS Grid?
Joomla 4 will rely heavily on CSS Grid.
To help you prepare for Joomla 4 and CSS Grid, we've released a big new update for our book called "CSS Grid Explained". CSS Grid Explained is a fun, practical introduction to CSS Grid.
What's new in this update?
- You'll find six new chapters in the book. In the next few weeks, look for another update with six more new chapters!
- We opened a Github repo for all the code in the book.
This book is available to EVERYONE with a current Joomlashack membership!
If you have an active subscription to any Joomlashack product, you can download a free copy of CSS Grid Explained. If you're not a Joomlashack member, today's a great day to join.
CSS Grid Explained Table of Contents
- Introduction to CSS Grid Terminology
- Creating Your First CSS Grid
- Using the Firefox Grid Inspector
- How to Create Explicit and Implicit Grids
- How to Use the Autoflow Property in CSS Grid
- How to Use the FR Unit For Layouts
- How to Size Tracks with the Auto Keyword
- How to Size Grid Items with the Span Keyword
- How to Use Line Numbers in CSS Grid
- How to Layer Items In CSS Grid
- How to Use Line Names in CSS Grid
- How to Place Items with Grid Template Areas
- How to Use the minmax() Function (new chapter!)
- How to Use the auto-fill and auto-fit Keywords (new chapter!)
- The grid-auto-flow: dense Property (new chapter!)
- How to Align Items in CSS Grid (new chapter!)
- The justify-content and align-content Properties (new chapter!)
- How to Nest Grids (new chapter!)