2 Designing a layout using CSS Grid

This chapter covers

  • Exploring grid tracks and arranging our grids
  • Using the minmax and repeat functions in CSS Grid
  • Working with the fraction unit, which is unique to CSS Grid
  • Creating template areas and placing items in the areas
  • Considering accessibility when using grids
  • Creating gutters between columns and rows within grids

Now that we have a basic understanding of how CSS works, we can begin exploring our options for laying out HTML content. In this chapter, we’ll focus on layout with grids.

2.1 CSS Grid

A grid, in this sense, is a network of lines that cross to form a series of squares or rectangles. Now supported by all major browsers, CSS Grid has become a popular layout technique.

Essentially, a grid ...

Get Tiny CSS Projects now with the O’Reilly learning platform.

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

Start your free trial