CSS Grid

Dr. Greg Bernstein

Updated September 14th, 2021

CSS Layout Grid

Learning Objectives

  • Introduce some of the vast capabilities of CSS grid layout
  • Familiarize student with grid layout terminology
  • Enable student to use grid layout for a wide variety of purposes from “page layout” to the layout of a section of a page.

Readings and More…

  1. MDN Grid

  2. CSS Tricks: A Complete Guide to Grid

  3. Grid Garden, “Welcome to Grid Garden, where you write CSS code to grow your carrot garden!”

Practice Pages/Demonstrations

What is it?

From CSS Tricks:

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows… You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).

Once over Lightly


rows, columns, gutters:

Grid terminology diagram

Example File

From MDN example0

<!-- html, head, and body omitted to save space -->
    <h1>Simple grid example</h1>

    <div class="container">

Rendering of Basic Example

Simple Grid Example

From MDN

  • Apply display: grid to the container; No visible effect since the default is a single column
  • Apply grid-template-columns: 200px 200px 200px; to the container to set up three fixed sized column to hold the entries.
  • Try it!

Rendering of first Grid

New Units, Gaps

  • You can use various CSS units px, em, percentages.
  • There is a new fr unit. “This unit represents one fraction of the available space in the grid container.”
  • You can set gaps between rows and columns with grid-row-gap, grid-column-gap, and grid-gap

fr and gap Example

.container {
    grid-template-columns: 1fr 1fr 2fr;
    grid-row-gap: 10px;

fr and gap Example Rendering

Concepts and Capabilities

Important Terminology

From CSS Tricks

  • Grid Container: “The element on which display: grid is applied. It’s the direct parent of all the grid items.”

  • Grid Item: “The children (e.g. direct descendants) of the grid container.”

Grid Line

from CSS Tricks Grid Line

The dividing lines that make up the structure of the grid. Here the yellow line is an example of a column grid line.
Grid line

Grid Track

From CSS Tricks

The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s the grid track between the second and third row grid lines.
Grid track

Grid Cell

From CSS Tricks

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid cell

Grid Area

From CSS Tricks

The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid area

Properties for Container and Items

Best Detailed Guide is the CSS Tricks article

See their Grid Properties Table of Contents for quick access and explanation of all the properties you can set.

Defining a Grid System

  • Columns and Rows: grid-template-columns, grid-template-rows, grid-template
  • Notes: You can assign names for later use to the grid lines defined in the above commands. You can then use these names when placing items
  • Gaps: grid-column-gap, grid-row-gap, grid-gap

Defining Areas

  • Use the grid-template-areas property to define areas and give them names
  • You can then use those names when placing items


From CSS Tricks

Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). This value applies to all grid items inside the container.

Values: start, end, center, stretch

justify-items Example

From CSS Tricks


Justify items


From CSS Tricks

Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.

Values: start, end, center, stretch

align-items Example

From CSS Tricks


Align items

Dealing with Extra Space 1

From CSS Tricks

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.

Dealing with Extra Space 2

  • Inline (row) axis: justify-content
  • Block (column) axis: align-content
  • Values: start, end, center, stretch, space-around, space-between, space-evenly

Specifying Items Grid Position

You specify a grid position for an item on that item, not on the container.

  • Column location: grid-column-start, grid-column-end
  • Row location: grid-row-start, grid-row-end
  • Note: Both of the above allow the use of a span indicator for items taking up multiple cells.
  • Assign/Define areas: grid-area

Overriding Default Alignment/Justification

  • Row axis: justify-self
  • Column axis: align-self

Page Layout Example

Grid for Overall Page Layout

Coarse Grained Page Layout

Rough layout plan

Setup Container and Items

  • Will make <body> element my grid container
  • Only direct descendants can be grid items, I’ll use: <nav>, <header>, and <main>

Example HTML

File PageGridExample.html

            <li><a href="PageGridExample.html">Home</a></li>
            <li><a href="PageGridExample.html">About</a></li>
            <li><a href="PageGridExample.html">Activities</a></li>
            <li><a href="PageGridExample.html">Membership</a></li>
            <li class="active"><a href="PageGridExample.html">Tides</a></li>
        <h1>Berkeley Tides</h1>
        <p>Information about tides in the Berkeley South sailing basin. To be furnished...</p>
        <p>🐳 &copy; 2020 Grotto Networking! 🐬</p>

Support for Reordering

For overall page layout I want the flexibility to reorder some of the main components.

Example Grid Item Setup

Naming grid items and setting justification and alignment properties, from PageGridExample.css

header {
  grid-area: titleBlock;
  justify-self: start;
  background-color: #f86969;

footer {
  grid-area: closing;
  justify-self: center;
  background-color: green;

nav {
  grid-area: menu;
  background-color: #f0cf72;

main {
  grid-area: content;
  background-color: white;

Example Container Setup

Assignment of items to grid areas, from PageGridExample.css

  body {
    display: grid;
      ". titleBlock titleBlock"
      "menu content content"
      ". content content"
      "closing closing closing";
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-template-rows: auto 30vh 40vh auto;
    grid-column-gap: 10px;
    background-color: gray;
    margin: 2em;

Example Page 1

Rendered Page, definitely needs work

Grid page layout rendered

Example Page 2

Rendered Page with dev tools ready to revise

Grid page layout rendered

Form Layout Example

Grids for Controls

Layout out a form or control panel

Nicely organized set of inputs and such

HTML & CSS Structure

  • Many elements such as <label>, <input>, <button>, <select>
  • Regular structure for form
  • Will order elements via HTML and not give each element a grid area name

Form Example HTML

FormLayout.html Give container an id or class for easy reference

<section id="Application">
    <label>Name:</label> <input id="name" type="text">
    <label>email:</label><input id="email" type="text">
    <label>Sail Number/Brand:</label><input id="sail" type="text">
    <select id="level">
        <option>Never Done It</option>
        <option>Foils to TI and Back</option>
    <label>Comments:</label><textarea name="comments" rows="8" cols="20" id="comments"></textarea>
    <button id="apply">Sign me up!</button>

Form No Grid

No styling on inputs, labels, etc…

Form Initial Grid

Set up columns

Form Add Gaps

Column and row gaps

Container CSS

From FormLayout.css

#Application {
    display: grid;
    grid-template-columns: 10rem 20rem; /* columns and size */
    grid-row-gap: 0.5em;
    grid-column-gap: 0.5em;
    border: dashed black;
    border-radius: 1rem;
    padding: 1.0rem;

Fix the Labels

Align the labels close to their inputs

Right align labels

CSS For <labels>

Could use classes to identify different labels, but our form is fairly regular. From FormLayout.css.

#Application label {
    font-family: sans-serif;
    justify-self: end; /* right justify the labels */
    font-style: italic;
// reveal.js plugins