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 is made up of columns and rows. We’ll create our grid and then assign positions to our items much as we place boats on a grid when playing the board game Battleship.

Although grid layouts are sometimes compared with tables, they have different uses and fulfill different needs. Grids are for layouts, whereas tables are for tabular data. If the content being styled is appropriate for a Microsoft Excel sheet, it’s tabular data and should be placed in a table.

2.2 Display grid

2.3 Grid tracks and lines

2.3.1 Repeating columns

2.3.2 The minmax() function

2.3.3 The auto keyword

2.3.4 The fractions (fr) unit

2.4 Grid template areas

2.4.1 The grid-area property

2.4.2 The gap property

2.5 Media queries

2.6 Accessibility considerations

Summary