Introduction to CSS Grid Layout

Redi School Munich - Spring 2021

Recap

Flexbox

💭 What do you remember?

CSS Grid

Why do we need another layouting system?

First, we started with tables, floats, positioning and inline-block

That was quite hacky & lacked functionality 🐱‍💻

Then we were given Flexbox

Much better, but for 1D layouts

Finally, Grid gives us the necessary flexibility to work on a 2D level

Agenda of Today

Terminology
Properties

Part 1: Parent Properties
Part 2: Child Properties

Device Adaptation

Terminology

Container

Parent of all grid items

Items

Children of grid container

Grid Line

Dividing lines that structure grid

Vertical or horizontal

Grid Cell

Single grid unit

Space between adjacent rows and adjacent columns

Grid Track

Space between adjacent grid lines

Represent columns & rows of grid

Item 1

Item 2

Item 3

Item 4

Item 5

Grid Area

Space surrounded by 4 grid lines

Can contain any number of cells


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5

Properties

Part 1: Parent Properties

Layout Definition

display

Values

grid: block-level
inline-grid: inline-level

Example

                    
                    
                      Item 1
                      Item 2
                      Item 3
                      Item 4
                      Item 5
                    
            
            
              .grid-container {
                display: grid;
              }
            

                
                    Item 1
                    Item 2
                    Item 3
                    Item 4
                    Item 5

Size of Columns & Rows

grid-template-columns, grid-template-rows

Values

<track-size>: size of column/row (px, %, auto, fr)
<line-name>: custom name (optional)

Example

                
                
                  Item 1
                  Item 2
                  Item 3
                  Item 4
                  Item 5
                
        
        
          .grid-container {
            grid-template-columns: 100px 25% auto;
            grid-template-rows: 40px 100px;
          }
        
                
                    Item 1
                    Item 2
                    Item 3
                    Item 4
                    Item 5

Example

              
              
                Item 1
                Item 2
                Item 3
                Item 4
                Item 5
              
      
      
        .grid-container {
          grid-template-columns: [c1] 100px [c2] 25% [c3] auto [c4];
          grid-template-rows: [r1] 40px [r2] 100px [r3];
        }
      
                
                    Item 1
                    Item 2
                    Item 3
                    Item 4
                    Item 5

Grid Structure

grid-template-areas

Values

<grid-area-name>: area name specified by grid-area
. : empty cell
none: no areas defined

Example

Example continued


                  .grid-container {
                    grid-template-columns: 25% 50% auto 100px;
                    grid-template-rows: auto 70px;
                    grid-template-areas: 
                      "header header header header"
                      "main main . sidebar"
                  }
                  .grid-item-1 {
                    grid-area: main;
                  }
                  .grid-item-2 {
                    grid-area: sidebar;
                  }
                  .grid-item-3 {
                    grid-area: footer;
                  }
                

                    Item 1
                    Item 2
                    Item 3

All-in-one

grid-template

Values

none: sets properties to initial values
<grid-template-rows> / <grid-template-columns>: specific values, sets grid-template-areas to none


                  grid-template: none | <grid-template-rows> / <grid-template-columns>;

Example

Example continued


                  .grid-container {
                    /* grid-template-columns: 25% 50% auto 100px; */
                    /* grid-template-rows: auto 70px; */
                    /* grid-template-areas: "header header header header"
                      "main main . sidebar" */
                    grid-template: 
                    "header header header header" auto
                    "main main . sidebar" 70px / 25% 50% auto 100px;
                  }
                  .grid-item-1 {
                    grid-area: main;
                  }
                  .grid-item-2 {
                    grid-area: sidebar;
                  }
                  .grid-item-3 {
                    grid-area: footer;
                  }
                
                

                    Item 1
                    Item 2
                    Item 3

Grid Line Size

column-gap, row-gap

Values

<line-size>: size of column/row (px, %, auto, fr)

Only created between tracks!

Example

              
              
                Item 1
                Item 2
                Item 3
                Item 4
                Item 5
              
      
      
        .grid-container {
          grid-template-columns: auto auto auto;
          column-gap: 10px;
          row-gap: 15px;
        }
      

        Item 1
        Item 2
        Item 3
        Item 4
        Item 5

Grid Line Size - Shorthand

gap

Values

<line-size>: size of column/row (px, %, auto, fr)


                .container {
                  gap: row-gap column-gap;
                }

If no row-gap is specified, it’s set to value of column-gap

Example

            
            
              Item 1
              Item 2
              Item 3
              Item 4
              Item 5
            
    
    
      .grid-container {
        grid-template-columns: auto auto auto;
        /* column-gap: 10px; */
        /* row-gap: 15px; */
        gap: 15px 10px;
      }
    

      Item 1
      Item 2
      Item 3
      Item 4
      Item 5

Content Placement in Cell

Properties

justify-items: Align grid items along row axis
justify-self: Align single grid item along row axis
align-items: Align grid items along column axis
align-self: Align single grid item along column axis

Values: start | end | center | stretch

Example

Example continued


    .grid-container {
      grid-template-columns: auto auto auto;
      grid-template-rows: 80px 90px;
      justify-items: end
    }
    .grid-item-1 {
      justify-self: start;
      align-self: center;
    }
  

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

Content Placement in Container

Properties

justify-content: Align tracks along row axis
align-content: Align tracks along column axis

Example

Example continued

            
              .grid-container {
                grid-template-columns: auto auto auto;
                grid-template-rows: 80px 90px;
                justify-content: end
              }
  
            

              Item 1
              Item 2
              Item 3
              Item 4
              Item 5

Properties

Part 1: Parent Properties

Part 2: Child Properties

Item Location

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Values

line: number or name of grid line
span <number>: item spans across given number of tracks
span <name>: item spans until given track
auto: auto-placement

Item will span 1, if no grid-column-end/grid-row-end is declared. Items can overlap each other. Use z-index to control stacking order.

Example

Example continued

        
          .grid-container {
            grid-template-columns: [l1] 140px [l2] 150px [l3] auto [l4] 150px [l5] 140px [end];
            grid-template-rows: [r1-start] 25% [r1-end r2-start] 100px [r2-end r3-start] auto [r3-end];
          }

          .grid-item-1 {
            grid-column-start: 1;
            grid-column-end: span l4;
            grid-row-start: 2;
            grid-row-end: span 1;
          }
        

          Item 1
          Item 2
          Item 3
          Item 4
          Item 5

Item Location - Shorthand

grid-column, grid-row


                .item {
                  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
                  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
                }

Example

            
                .grid-item-1 {
                  /* grid-column-start: 1; */
                  /* grid-column-end: span l4; */
                  /* grid-row-start: 2; */
                  /* grid-row-end: span 1; */
                  grid-column: 1 / span l4;
                  grid-row: 2 / span 1;
                }

Item Location - Even Shorter Shorthand

grid-area


                  .item {
                    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
                  }

Example

          
            /* as shorthand */
              .grid-item-1 {
                /* grid-column: 1 / span l4; */
                /* grid-row: 2 / span 1; */
                grid-area: 2 / 1 / 2 / span l4;
              }
            /* for naming */
            .grid-item-1 {
              grid-area: main-content;
            }

In-Class Exercise

In your group, use the documentation on CSS Grid & the web to research on your property/function.

Tasks:

Create a README in which you explan the topic
Create an html & css file (include group and topic name in file name) with 2 implementation examples
Present your work in 5 min to the class

Exercise

Group 1 - Properties: grid-auto-columns, grid-auto-rows (Look out for explicit & implicit grids)
Group 2 - Property: grid-auto-flow
Group 3 - Propery: grid
Group 4 - Topic: How to declare lengths/sizes (px, rem, %, min-content, max-content, auto, fr), Function: minmax()
Group 5 - Function: repeat()

Device Adaptation

Media Queries

Media Queries


              .grid-container{
                display: grid;
                grid-template-columns: 250px 3fr 2fr;
               }
               .grid-item-1 {
                grid-column: 1 / 4;
               }
               .grid-item-2 {
                grid-row: 2 / 4;
               }

               @media only screen and (max-width: 1000px){
                 .grid-container{
                  grid-template-columns: 1fr 1fr;
                 } 
                 .grid-item-1 {
                  grid-column: 1 / 3;
                  grid-row: 2 / 3;
                 } 
                 .grid-item-2 {
                  grid-row: 1 / 1;
                 }
               }
              

                
                    Item 1
                    Item 2
                    Item 3
                    Item 4
                    Item 5

Some Best Practices

Use grid with flexbox, not instead of it
Take advantage of negative line numbers
Name your grid lines

Homework

The "ReDI News" team wants to setup an online version of their newspaper. They ask you the help them with this task. As they would like to reach as many readers as possible, the page should be easily readable on a laptop and phone screen.

Homework

The team would like you to create a website, the start page, which comprises the following content:

a header with the name of the Newspaper.
one section for a preview of the featured article of the day
three sections for the previews of three secondary articles of the day
a navigation bar
a footer

They also give you the freedom to add additional sections which you would like to include.

Homework

Create a mockup for the laptop version
Implement your page design with CSS Grid
Think about how you need to change your page design to be better viewable on a mobile phone. Create a second mockup
Adapt your existing code such that it implements your new design for mobile devices.

Introduction to CSS Grid Layout

Recap

CSS Grid

Why do we need another layouting system?

Agenda of Today

Terminology

Container

Items

Grid Line

Grid Cell

Grid Track

Grid Area

Properties

Part 1: Parent Properties

Layout Definition

Example

Size of Columns & Rows

Example

Example

Grid Structure

Example

Example continued

All-in-one

Example

Example continued

Grid Line Size

Example

Grid Line Size - Shorthand

Example

Content Placement in Cell

Example

Example continued

Content Placement in Container

Example

Example continued

Properties

Part 1: Parent Properties

Part 2: Child Properties

Item Location

Example

Example continued

Item Location - Shorthand

Example

Item Location - Even Shorter Shorthand

Example

In-Class Exercise

Exercise

Device Adaptation

Media Queries

Media Queries

Some Best Practices

Homework

Homework

Homework

Questions / Feedback?