# Week 7: CSS Grid

Agenda

Grid systems
CSS Grid
Alignment and Proximity

# Grid Systems

This video is part of a long system about design. It explains what is important about Grids and Grid Systems in a humorous way. We recommend watching more of this series as you have time. Just as your programming knowledge and understanding will grow over time, so will your design knowledge.

Do NOT think of design as simply something you had to do for a couple weeks in MAD9013. Design is something that you will need to apply in EVERY course.

Design principles: Grid systems & alignment

# CSS Grid

Flexbox is fantastic at creating a single column or a single row. It even has properties for handling overflowing content. However, if you want to control a more complex layout and treat it like a grid then CSS Grids tend to be a better option.

There is a fantastic free short online course about CSS Grid by Wes Bos, a well known Canadian Web Developer. Wes Bos CSS Grid.

Used for creating a two dimensional layout

TIP

Whenever you are setting display: grid on an HTML element, you are really just talking about how you want to position the children of that element.

We can set the display property on the container and all of it's child elements will automatically be positioned and sized by the CSS Grid properties.
Getting Started with CSS Grids video

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 1fr means 1 fraction */
  grid-template-columns: repeat(3, 1fr);
  /* both these values do the same thing */
  grid-template-rows: auto;
}

1
2
3
4
5
6
7

# Named Grid Areas

In addition to providing sizes or fractions for all the items, we can also define placement with names.
The sizes defined with grid-template-columns and grid-template-rows will control the relative sizes of the areas defined.

.container {
  display: grid;
  grid-template-areas:
    'nav nav'
    'mast mast'
    'main side'
    'foot foot';
}
nav {
  grid-area: nav;
}
header {
  grid-area: mast;
}
main {
  grid-area: main;
}
sidebar {
  grid-area: side;
}
footer {
  grid-area: foot;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

watch the videos on uneven grid areas and overlapping grid areas
Here is an Excellent free online course on CSS Grid CSSGrid.io
Visual Guide to most CSS Grid properties

# More Grid Resources

# TODO Before Week 8

Self-Directed TODO

Watch the following videos before week 8:

intro to HTML forms

← Week 6: Flexbox Week 8: Forms & Tables →