CSS Grid

Dr. Greg Bernstein

Updated: September 8th, 2019

CSS Layout Grid

Readings

  1. MDN Grid

  2. CSS Tricks: A Complete Guide to Grid

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

Terminology

rows, columns, gutters:

Example File

From MDN example0

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

    <div class="container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
    </div>
</body>

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 {
    display:grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-row-gap: 10px;
    grid-column-gap:20px;
}

fr and gap Example Rendering

repeat and grid-auto-rows

  • You can use the repeat “command” to avoid writing out many of the same row or column sizes.
  • Example: grid-template-columns: repeat(2, 1fr) 2fr is equivalent to the previously mention CSS.
  • You can set the row height with grid-auto-rows
  • Example: grid-auto-rows: 70px

repeat and grid-auto-rows Example

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

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

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

Center

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

End

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

Control Created Rows/Cols and Placement

  • Sizing for automatically created rows or columns with grid-auto-columns and grid-auto-rows
  • Control the automatic placement of items into grid cells with grid-auto-flow

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

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>

Support for Reordering

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

Example Item Setup

Naming grid items and setting justification and alignment properties

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

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

Example Page

Note weird background colors to help show grid

Form Layout Example

Grids for Controls

Layout out a form or control panel

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

Example HTML

Choose container and give it an id for easy reference

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

Form No Grid

Form Initial Grid

Form Add Gaps

Container CSS

#MemberForm {
  display: grid;
  grid-template-columns: 10em 20em;
  padding: 1em;
  grid-row-gap:1em;
  grid-column-gap: 1em;
  margin: 0.5em;
  border: solid #55cedc;
  border-radius: 15px;
  max-width: 40em;
}

Fix the Labels

Align the labels close to their inputs

CSS For <labels>

Could use classes to identify different labels, but our form is fairly regular

#MemberForm label {
  justify-self: end;
  font-family: sans-serif;
}