Week 7: CSS Grid

Agenda

• Week 7 Tutorial Files (opens new window)
• 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 (opens new window)

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 (opens new window).

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 (opens new window)

.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;
}

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;
}

• watch the videos on uneven grid areas (opens new window) and overlapping grid areas (opens new window)

• Here is an Excellent free online course on CSS Grid CSSGrid.io (opens new window)

• Visual Guide to most CSS Grid properties (opens new window)

More Grid Resources

• MDN CSS Grids (opens new window)

• More reading about CSS Grids (opens new window)

• Should I use Flexbox or CSS Grid? (opens new window)

Layouts For Everything

Now that you are starting to get a grasp on Flexbox and Grid, here is a FANTASTIC video showing 10 very common layouts that you can build with CSS in one or two lines of CSS with Flexbox and Grid. These layouts rely on the default values for quite a few of the properties.

To Do Before Week 9

Self-Directed To Do

Watch the following videos before week 8:

• intro to HTML forms

• Complete Week 7: Platform Tour & CSS Grid