O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing with CSS Grid Layout

Book Description

Layout in CSS has always been a tricky task: hacking solutions using positioning, floats, and the one-dimensional flexbox has never been very satisfactory. Fortunately, there is a new tool to add to our arsenal: CSS Grid Layout. It is an incredibly powerful layout system that allows us to design pages using a two-dimensional grid - offering the kind of fine-grained layout control that print designers take for granted!

Grid Layout has been in development for a while, but has recently been made a W3C candidate recommendation and has been added to most of the major browsers, so is ready for prime time.

This short selection of tutorials, hand-picked from SitePoint's HTML & CSS channel, will get you up and running with Grid Layout and using it on your own sites in no time.

This collection includes:

  • An Introduction to the CSS Grid Layout Module by Ahmad Ajmi
  • Seven Ways You Can Place Elements Using CSS Grid Layout by Nitish Kumar
  • How to Order and Align Items in Grid Layout by Nitish Kumar
  • A Step by Step Guide to the Auto- Placement Algorithm in CSS Grid by Nitish Kumar
  • How I Built a Pure CSS Crossword Puzzle by Adrian Roworth

This book is suitable for front end developers and web designers with some CSS experience.

Table of Contents

  1. Designing with CSS Grid Layout
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Conventions Used
  7. Chapter 1: An Introduction to the CSS Grid Layout Module
    1. What is the CSS Grid Layout Module?
    2. A Grid Layout Example
    3. Grid Layout Module Concepts
    4. Position Items by Using a Line Number
    5. Position Items by Using Named Areas
    6. Slack Example
    7. Grid Layout Module vs Flexbox
    8. CSS Grid Layout Module Resources
    9. Conclusion
  8. Chapter 2: Seven Ways You Can Place Elements Using CSS Grid Layout
    1. #1 Specifying Everything in Individual Properties
    2. #2 Using gridrow and gridcolumn
    3. #3 Using gridarea
    4. #4 Using the span Keyword
    5. #5 Using Named Lines
    6. #6 Using Named Lines with a Common Name and the span Keyword
    7. #7 Using Named Grid Areas
  9. Chapter 3: How to Order and Align Items in Grid Layout
    1. How the Order Property Works in Grid Layout
    2. Aligning Content Along the Row Axis in Grid Layout
    3. Aligning Content Along the Column Axis in Grid Layout
    4. Aligning the Whole Grid
    5. Conclusion
  10. Chapter 4: A Step by Step Guide to the AutoPlacement Algorithm in CSS Grid
    1. Basic Concepts for a Better Grasp of the Autoplacement Algorithm
    2. Step #1: Generation of Anonymous Grid Items
    3. Step #2: Placement of Elements with an Explicitly Specified Position
    4. Step #3: Placement of Elements With a Set Row Position but No Set Column Position
    5. Step #4: Determining the Number of Columns in the Implicit Grid
    6. Step #5: Placement of Remaining Items
    7. Conclusion
  11. Chapter 5: How I Built a Pure CSS Crossword Puzzle
    1. Building the Board/Grid
    2. Using Form Elements for the Squares
    3. Using the General Sibling Selector
    4. Indicating Correct Answers
    5. Challenges of the Grid System
    6. Checking for Valid Letter Input
    7. Highlighting the Clues on Hover
    8. Numbering the Clues
    9. The “Check for Valid Squares” Checkbox
    10. Conclusion