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
Lewis Coulson | Brett Jephson | Matt Park | Marian Zburlea | Terry O'Brien | David Ames | Tiffany Ford | Adam Rosson | Rob Larsen | SudarshanReddy Kurri | Danial Pervaiz
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

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

When we design grids, it is essential to know the following things:

  • Do’s:
    • Design with the target group in mind: Is it a website to solve problems or to sell something? Should the site seem busy, or should it feel relaxed?
    • Keep the content in mind: What content should be placed on the site and in which form? What message should the content convey?
    • Keep the stakeholders in mind: What problems do they want to be solved? How can they influence the design?
    • Follow the design principles of contrast, balance, repetition, rhythm, hierarchy, and proximity.
  • Don’ts:
    • Do not design for the best case only. Instead, work with edge-case content, such as extended text passages and less-than-ideal images.
    • Do not cramp things together too tightly. Leave some white space for elements to breathe and for the user not to lose focus.
    • Do not design for a single screen. If possible, create a design that’s fluid and responsive...
Previous Section
End of Section 6
Next Section