Mastering CSS Grid

Mastering CSS Grid

by Pascal Thormeier
Released June 2023
Publisher(s): Packt Publishing
ISBN: 9781804614846

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn the basics and advanced aspects by creating a project using CSS Grid and dive into the specifications of using CSS grid concepts

Key Features

  • Explore the differences between grid boxes and block containers to enhance your web design knowledge
  • Create block-level grids, inline grids, and nested grids to create responsive layouts
  • Adopt best practices for attaching elements to your layout by using explicitly defined grid lines or grid areas

Book Description

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.

What you will learn

  • Improve your skills with basic and advanced CSS Grid concepts
  • Use flexbox and CSS Grid play together to create beautiful responsive layouts
  • Explore advanced grid layouts and how they can benefit your next project
  • How frameworks use CSS Grid to create reusable components
  • Learn the benefits of grid layouts and create beautiful websites
  • Create your own polyfills and understand when not to use grid layouts
  • Build responsive and usable web project using CSS Grid

Who this book is for

This book is for web developers and designers who want to learn CSS Grid and improve their layout design skills. This book will also be a valuable resource for CSS developers seeking to advance their skills to the most proficient level. Additionally, this book will serve as an excellent guide for those who wish to expand their toolset to include flexbox and grids.

Table of contents

  1. Mastering CSS Grid
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share your thoughts
    9. Download a free PDF copy of this book
  6. Part 1–Working with CSS Grid
  7. Chapter 1: Understanding the Basic Rules and Structures for CSS Grid
    1. Technical requirements
    2. Understanding the basic rules related to CSS Grid
      1. Defining grid terminology
      2. Creating our first grid
      3. Arranging grid elements
      4. Adding some breathing room (or gaps)
    3. Using grid templates
      1. Naming grid rows and columns
    4. Grid flow
    5. Understanding special grid-related units, keywords, and functions
      1. The fractional unit
      2. Sizing keywords and functions
      3. Repetitive column and row definitions
    6. Using shortcuts
      1. The grid attribute
      2. The grid-template attribute
      3. The grid-row and grid-column attributes
      4. The gap attribute
    7. Summary
  8. Chapter 2: Project Introduction: What We’ll Work on and First Tasks
    1. Technical requirements
    2. Introducing Awesome Analytics – our gibberish analytics tool
    3. Setting up Awesome Analytics locally
    4. Receiving our first task – implementing the grids
    5. Exploring the code of Awesome Analytics
      1. The CSS structure
      2. The HTML structure
      3. The JavaScript structure
    6. Fixing Awesome Analytics’ layout problem – a possible solution
      1. Analyzing the problem
      2. Creating the page layout
      3. Arranging the chart boxes
    7. Summary
  9. Chapter 3: Building Advanced Grid Layouts
    1. Technical requirements
    2. Understanding the row axis and column axis and how to influence them
    3. Arranging grid items and grid cells with alignment and justification rules
      1. Aligning and justifying items
      2. Aligning and justifying the entire grid within its container
    4. Defining and using advanced grid templates
      1. Defining empty cells in grid area templates
      2. Naming grid areas implicitly
      3. Practicing creating flexible layouts with JavaScript
      4. Arranging nested child elements in parent grids
    5. Creating subgrids
      1. Understanding how subgrids work
      2. Understanding what is inherited
      3. Understanding subgrids’ current state of development (as of 2023)
    6. Masonry layouts
      1. Understanding what masonry layouts are
      2. Using masonry layouts with CSS Grid and knowing about its pitfalls
    7. Practicing with Awesome Analytics
      1. Receiving the task
      2. Implementing a possible solution
    8. Summary
  10. Part 2 – Understanding the CSS Grid Periphery
  11. Chapter 4: Understanding and Creating Responsive and Fluid Grid Layouts
    1. Technical requirements
    2. Understanding the challenges of designing layouts
      1. Existing things
      2. The content
      3. The target groups
      4. The stakeholders
      5. The web design principles
    3. Understanding the difference between adaptive, responsive, and fluid layouts
      1. Adaptive layouts
      2. Responsive layouts
      3. Fluid layouts
    4. Learning responsive layout best practices
      1. Prioritizing content
      2. Applying mobile first
      3. Designing with worst-case content in mind
      4. Combining adaptiveness, responsiveness, and fluidity
    5. Implementing responsive and fluid layouts with CSS Grid
      1. Media queries and altering grid area templates
      2. Using sizing keywords and functions for fluid layouts
    6. Practicing responsive layouts with Awesome Analytics
      1. The task at hand
      2. A possible solution
    7. Summary
  12. Chapter 5: Implementing Layouts with Flexbox and CSS Grid
    1. Technical requirements
    2. Arranging media objects
    3. Arranging teasers and card elements
    4. Arranging forms and form elements
      1. Input groups
      2. Compound form elements
      3. Form layouts
    5. Building page layouts and partials
      1. Headers and navigation
      2. Footers
      3. Building entire pages
    6. Practicing with Awesome Analytics
      1. Analyzing the code base
      2. Adjusting the header
      3. Adjusting the chart boxes
      4. Adjusting the page layout
      5. Adjusting the chart box container
      6. Conclusion
    7. Summary
  13. Chapter 6: Benefits of Grid Layouts and When Not to Use Them
    1. Technical requirements
    2. Cherishing the benefits of grid layouts
      1. The ease of design and development
      2. Visual appeal
      3. Simple to adapt and expand
    3. Understanding the drawbacks of grid layouts
      1. Compatibility with content
      2. Losing identity
      3. The temptation of packing things too tight
      4. Being restricted
    4. Learning about some alternatives for grid layouts
      1. Breaking out of the grid
      2. Using animations
      3. Using different shapes
    5. A list to help us decide
    6. Summary
  14. Part 3 – Exploring the Wider Ecosystem
  15. Chapter 7: Polyfilling CSS Grid’s Missing Features
    1. Technical requirements
    2. Understanding the tools to write a CSS polyfill from scratch
      1. Understanding PostCSS
      2. Understanding how to write PostCSS plugins
      3. Understanding Browserify
      4. Tying loose ends
    3. Creating a polyfill for subgrid
      1. Understanding how subgrid is meant to work
      2. Why and when the polyfill may be useful
      3. Writing a polyfill
      4. Why we shouldn’t use this polyfill
    4. Creating a polyfill for masonry
      1. Understanding how masonry is meant to work
      2. Why and when the polyfill may be useful
      3. Writing the polyfill
      4. Why we shouldn’t use this polyfill
    5. Creating a polyfill for additional pseudo-classes
      1. Understanding the idea behind nth-row and nth-col
      2. Why and when the polyfill may be useful
      3. Writing the polyfill
      4. Why we shouldn’t use this polyfill
    6. Animating grids
      1. Understanding the goal of grid animations
      2. Using the animate-css-grid library
    7. Understanding why we should not use polyfills
    8. Summary
  16. Chapter 8: Grids in the Wild – How Frameworks Implement Grids
    1. Technical requirements
    2. Learning how Tailwind implements grids
    3. Learning how Bootstrap implements grids
    4. Learning how Foundation implements grids
      1. Float grid
      2. Flex grid
      3. XY grid
    5. Learning how Bulma.io implements grids
    6. Learning how UIkit implements grids
    7. Learning how Pure.css implements grids
    8. Learning how Tachyons implements grids
    9. Learning how Cutestrap implements grids
    10. Learning how other frameworks don’t implement grids
    11. Practising Bootstrap and Tailwind frameworks with AwesomeAnalytics
      1. Implementing Tailwind’s grid
      2. Implementing Bootstrap’s grid
    12. Summary
  17. Part 4 – A Quick Reference
  18. Chapter 9: Quick Reference and Cheat Sheet
    1. Technical requirements
    2. Important terms and their definitions
    3. CSS Grid attributes, values, functions, and units
      1. Display property values
    4. CSS Grid recipes for everyday use cases
      1. Holy grail layouts
      2. Responsive Holy grail layouts using grid areas
      3. Dashboard box arrangement
      4. A fluid image gallery with a fixed aspect ratio and minimum element width
      5. Media objects
      6. Full-height pages with a sticky header
      7. Screen-filling sections for landing pages
      8. Gantt charts
    5. Grid design best practices and do’s and don’ts
    6. A framework cheat sheet for the Holy grail layout
      1. Tailwind
      2. Bootstrap
      3. Foundation (XY Grid only)
      4. Bulma.io
      5. UIKit
      6. Pure.css
      7. Tachyons
      8. Cutestrap
    7. Summary
  19. Index
    1. Why subscribe?
  20. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share your thoughts

Product information

  • Title: Mastering CSS Grid
  • Author(s): Pascal Thormeier
  • Release date: June 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781804614846