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

Setting up Awesome Analytics locally

Now it’s time to get this project up and running locally.

We first need to ensure that we’ve got Node.js and npm installed. If they’re not installed on our system, we can head to https://nodejs.org/en/download/ and download Node.js and npm. npm is included when installing Node.js. Once installed, we can check out the code on our local machine.

For that, we have three different options. We can either clone the code for the entire book and work in the chapter directory, do a sparse checkout and only clone the project, or download the code folder from GitHub without using Git.

Since the GitHub repository also provides other code pieces and project progress for other chapters, cloning the entire repository is recommended. For that, we enter the following code in our command-line interface. On OS X and Linux, the command line interface is the Terminal app. On Windows, we may use PowerShell or WSL:

A note on Terminal code...

Previous Section
End of Section 4
Next Section