Week 7: CSS Grid

Agenda

• Zoom Tutorial
  • CSS Grid
• In-Class
  • Grid Layouts
• Continue work on Project 1 - Two Page Website.

In-Class Tutorial

Intro to CSS Grid

Together we will explore using CSS Grid to create responsive layouts.

Deliverables

In-Class 7

Split Image Content Section

This follow along tutorial will be a practical application of CSS Grid to create an image with text section.

Due: Fri Oct 20, 2023

Assignment 7

Card Group

Create a responsive layout to display a group of cards.

Due: Sun Oct 29, 2023

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 7: