CSS for Developers

Grid Layout

Grid Concept

What is the CSS Grid?

A two-dimensional layout system, controlling layout both in rows and columns.

Grid Container

The container that holds the entire CSS grid. It is the element that has display: grid or inline-grid property on it.


              .grid-container {
                display: grid;
              }

Grid Item

Any element that is a direct child of a grid container.


                .grid-container {
                  display: grid;
                }
              

                

                  
Grid Item 1

                  
Grid Item 2

                  
Grid Item 3

Terminology

Grid Line

The vertical and horizontal lines that divide the grid and separate the columns and rows.

Their numbering starts with 1 (not 0).

Grid Cell

A single unit of a CSS grid.

Grid Area

Rectangular space surrounded by four grid lines.

A grid area can contain any number of grid cells.

Grid Track

The space between two grid lines.

This space can be horizontal or vertical.

Row and Columns

Grid Row

A horizontal track of a grid.

Grid Column

A vertical track of a grid.

Gutter / Gap

The space between rows and columns in a grid.

Basic Grids

Example


                .grid-container {
                  display: grid;
                  grid-template-columns:repeat(3, 1fr);
                }
            

                

                  
Grid Item 1

                  
Grid Item 2

                  
Grid Item 3
Grid Item 1
Grid Item 2
Grid Item 3

grid-template-columns
&
grid-template-rows

A way to define the number of rows and columns as well as their size.

CSS length unit: fr

  • What is fr ?
  • What does repeat() do?
  • Example: repeat(4, 25%) vs. repeat(4, 1fr) with
    grid-column-gap: 10px ?

    • repeat(4, 25%)
    Grid Item 1
    Grid Item 2
    Grid Item 3
    Grid Item 4

    repeat(4, 1fr)
    Grid Item 1
    Grid Item 2
    Grid Item 3
    Grid Item 4

An Explicit Grid


              .grid-container {
                display: grid;
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-rows: 4fr 1fr 2fr;
              }
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6
Grid Item 7
Grid Item 8
Grid Item 9

An Explicit Grid

with dynamic row and column size


              .grid-container {
                display: grid;
                grid-template-columns: minmax(auto, 40%) 1fr 12rem;
                grid-template-rows: minmax(75px, auto) minmax(75px, 150px) auto;
              }
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
(very very very very very very long content)
Grid Item 6
Grid Item 7
Grid Item 8
Grid Item 9

An Implicit Grid


              .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
              }
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
(very very very very very very long content)
Grid Item 6
Grid Item 7
Grid Item 8

Grid Garden – Part 1

Exercise Solve the exercises 20-27 of CSS Grid Garden
(open link or use next slide)
Solve the exercises 20-27
(press down to hide this)

Browser Dev Tools

css grid devtools
  • Open the DevTools (F12, Right-Click + Inspect)
  • Click on "grid"

Grid Items

Grid Lines

Grid items are positioned using grid lines.

Positioning


                .item-1 {
                  grid-row: 2/3;
                  grid-column: 2/3;
                }
                .item-3 {
                  grid-row: 3/4;
                  grid-column: 3/4;
                }
              

                

                  
Item 1

                  
Item 2

                  
Item 3
Grid Item 1
Grid Item 2
Grid Item 3

Properties

  • grid-row
    • grid-row-start
    • grid-row-end
  • grid-column
    • grid-column-start
    • grid-column-end

Grid Garden – Part 2

Exercise Solve the exercises 1-9 of CSS Grid Garden
(open link or use next slide)
Solve the exercises 1-9
(press down to hide this)

Advanced Grid

Template Areas

What is grid-area again?

  1. grid-row-start
  2. grid-column-start
  3. grid-row-end
  4. grid-column-end

Template Areas (v2)


                .container {
                  display: grid;
                  grid-template-columns: repeat(3, 1fr);
                  grid-template-rows: repeat(4, 1fr);
                  grid-template-areas:
                      "header header header"
                      "sidebar content-1 content-1"
                      "sidebar content-2 content-3"
                      "footer footer footer";
                }

                .sidebar {
                  grid-area: sidebar;
                }
                …
header
sidebar
content-1
content-2
content-3
footer

Conclusion

Flex vs. Grid

Flex

  • single direction, main and cross axis
  • primarily for row or column layouts (with wrapping)
  • flow and alignment defined on container
  • layout and sizing defined by items
  • items shrink/grow based on space available

Grid

  • two-dimensional, rows and columns
  • manage rows and columns simultaneously
  • full layout defined on container
  • spacing in both directions (gap)
  • items placed inside grid cells
Final Exercise person tile(s) in a grid

Go to the code sandbox and fill up the available space with the person tiles. Think of mobile, tablet and desktop widths. Align the previously built person tiles using a CSS grid layout.

Hint: Try if you can make the layout responsive without media queries.

Link to a possible solution

Further Resources

Questions?