CSS Basics: CSS Grid Essentials You Need to Know to Get Started

CSS Grid Tutorial

Contents of CSS Grid Tutorial

Basics of CSS Grid

Position Items in the Grid

Assign Names to Grid Lines

Assign Names to Grid Areas

The mobile internet is a major challenge for website developers. Mobile devices such as tablets and smartphones have different screen resolutions than desktop computers and laptops. These different displays and screen resolutions need to be considered when designing web pages.

Responsive Web Design ensures that a website looks great and is usable on any device at any screen resolution. Responsive layouts automatically adjust to the available screen resp. window size.

The CSS Grid is a grid of imaginary lines. It is used to divide the layout of a web page into rows and columns (Tracks). Grid cells are the intersections of rows and columns. A grid cell is bounded by four grid lines and is the smallest unit in the grid container. This layout grid can be used to effectively design complex, nested layouts.

Basic Function of CSS Grid

CSS Grid – Overview of Most Important Terms

CSS Grid is a powerful layout system for designing websites. In order to master this versatile system, it is necessary to know the most important terms. Here are some important terms you should know:

Grid Container

The Grid Container is the element on which the property display: grid, is applied. It becomes the parent element of the grid. The direct child elements of the grid container become grid items. The layout grid is defined inside the grid container.

Grid Item

Grid Items are direct child elements (grid cells) of the grid container.

Grid Line

Grid Lines are the dividing lines that make up the grid. These can be horizontal as well as vertical lines. They are numbered from the top and left edges of the grid. These lines are used to position grid items in the grid.

Grid Cell

A Grid Cell is the intersection between a grid row and a grid column. Each grid cell is bounded by four grid lines. Each cell in the grid can contain one or more grid items.

Grid Row

A Grid Row is the space between two adjacent horizontal grid lines. They are also called horizontal track of the grid.

Grid Column

A Grid Column is the space between two adjacent vertical grid lines. They are also called vertical track of the grid.

Grid Track

A Grid Track is the space between two adjacent grid lines. Grid tracks can be rows or columns.

Grid Area

A Grid Area is a rectangular area bounded by four grid lines and is made up of one or more grid cells. Grid areas must be rectangular. It is not possible to create a T or L-shaped grid area.

Grid Gap

Grid Gap is the distance between two adjacent grid tracks (rows and columns).

Fraction

CSS Grid introduces the new length unit Fraction to define the width of a grid column. The column width can be specified in fr (fraction). Here, 1fr means one part of the total available width. The width of grid columns can of course still be defined with all existing units of length, e.g. px or em.

CSS Grid works with a parent element (Grid Container) in which the grid is defined. Then several child elements (Items) are placed in the grid. The display: grid command is required so that the container gets the information that CSS Grid is used. The properties defined in the parent container are inherited by all items. Then the rows and columns are defined.

The rows resp. columns of the grid are each defined by a space-separated list of values. The values specify the height resp. width of the tracks. The distance between them is the width of the grid lines.

The height or width (Track Size) can be a Length or a Percentage. A special case is the fraction unit (fr), which can be used to divide the screen individually, similar to percentage values. The advantage of the relative fr unit is that the grid can automatically resize to fit the screen size.

The grid-template-rows property is used to define the rows and the grid-template-columns property is used to define the columns. These two properties create the grid and draw the imaginary grid lines.

If you want to create space between the rows or columns of the grid, you can set the width of the grid lines using the gap property of the grid container.

You can specify one or two values for gap.

One Value
The value defines the size of space between the rows and columns.
Two Values
The first value specifies the vertical space between the rows (row-gap), the second value specifies the horizontal space between the columns (column-gap).

The gap property is a shorthand for the row-gap and column-gap properties (formerly grid-gap, grid-column-gap and grid-row-gap).

Note:

The spacing is only created between the columns or rows. The first and last grid lines in horizontal and vertical directions remain unchanged.

When child elements are inserted into the grid container, the content is automatically inserted into the grid. By default, elements in the grid container are aligned row by row from top left to bottom right.

The following example creates a CSS grid with three rows and four columns. The first row has a height of 12em, and the third row has a height of 6em. The middle row occupies the remaining space.

Example CSS

/* Define the Grid Container */
.grid-container {
  display: grid;
  grid-template-rows: 12em 1fr 6em;
  grid-template-columns: auto auto auto auto;
  gap: 1.0em;
  padding: 0;
  background: #dbdbdb;
}

.grid-container > div {
  font-size: 1.25em;
  text-align: center;
  background: #94bbcc;
  color: #000000;
  border: 1px solid #000000;
}

Example HTML

<div class="grid-container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
  <div>Box 6</div>
  <div>Box 7</div>
  <div>Box 8</div>
  <div>Box 9</div>
  <div>Box 10</div>
  <div>Box 11</div>
  <div>Box 12</div>
</div>

Output of the HTML code

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

Box 10

Box 11

Box 12

This background represents the screen and is not part of the sample code.

To make the effect more visible, the output window has a height of 40em. The grid container has a height of 100% of the output window.

Position Items in the Grid

CSS Grid also allows you to position items anywhere in the grid. To achieve this, the CSS properties

grid-row-start and grid-row-end resp.
grid-column-start and grid-column-end

are used to tell the child elements where they should be placed in the grid. For these CSS properties, there are also shorthand notations

grid-row resp.
grid-column

The start and end line of the grid are separated by a slash /.

Note:

Positions are made using grid lines, not grid columns or grid rows.

The Example Layout shown above has four columns and three rows. It therefore has five vertical and four horizontal grid lines. If an element is to extend across the entire width, then it spans from grid line 1 (0%) to 5 (100%).

3 Column Layout with Header and Footer

The following code example shows how to position the elements in the grid to create a 3-column layout with header and footer.

Example CSS

/* 3 Column Layout using CSS Grid */
.gridBox {
  display: grid;
  grid-template-rows: 4em 1fr 2em;
  grid-template-columns: 15% auto 25%;
  gap: 0;
  padding: 0;
  background: transparent;
}

.gridBox > nav {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #600d0d;
  color: #000000;
}

.gridBox > header {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #ffffd2;
  color: #000000;
}

.gridBox > main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #94bbcc;
  color: #000000;
}

.gridBox > aside {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #e5f3d8;
  color: #000000;
}

.gridBox > footer {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #dfdfdf;
  color: #000000;
}

Example HTML

<div class="gridBox">
  <header>Headline</header>
  <main>Main Content of the Page</main>
  <aside>Info Box</aside>
  <nav>Navigation of the Page</nav>
  <footer>Footer</footer>
</div>

Output of the HTML code

Headline

Main Content of the Page

This background represents the screen and is not part of the sample code.

To make the effect more visible, the output window has a height of 40em. The grid container has a height of 100% of the output window.

Recommendation
In this example, the width for the navigation and the right sidebar (Info Box) is specified as a percentage. In practice, it is usually better to use a relative unit such as em.

In the sample HTML code, the main content comes before the navigation. The info box and the footer are placed at the bottom of the document. This improves accessibility and SEO (Search Engine Optimization).

Assign Names to Grid Lines

When you define the grid using the grid-template-rows and grid-template-columns properties, you can assign names to the grid lines. The line names can then be used to position the items (grid elements).

The assigned names must be enclosed in square brackets [⋯] and placed relative to the tracks (rows or columns).

Example

grid-template-rows: [row1] 4em [row2] auto [row3] 2em [row4];

grid-template-columns: [col1] 16em [col2] 1fr [col3] 20em [col4];

You can also assign more than one name to a grid line. The names are separated with a space in the square brackets.

Position Items with Line Names

You can also specify the assigned grid line names instead of grid line numbers when you position the grid items (child elements).

Example CSS

.gridBox {
  display: grid;
  grid-template-rows: [row1] 4em [row2] auto [row3] 2em [row4];
  grid-template-columns: [col1] 16em [col2] 1fr [col3] 20em [col4];
  . . .
}

.gridBox > nav {
  grid-row: row1 / row4;
  grid-column: col1 / col2;
  . . .
}

.gridBox > header {
  grid-row: row1 / row2;
  grid-column: col2 / col4;
  . . .
}

.gridBox > main {
  grid-row: row2 / row3;
  grid-column: col2 / col3;
  . . .
}

.gridBox > aside {
  grid-row: row2 / row3;
  grid-column: col3 / col4;
  . . .
}

.gridBox > footer {
  grid-row: row3 / row4;
  grid-column: col2 / col4;
  . . .
}

Assign Names to Grid Areas

Using Grid Areas is even clearer than the use of line numbers or line names.

In CSS Grid, you can combine multiple cells of the grid into an Area and assign a name to that area. This makes positioning elements in the grid more intuitive.

Each string value in grid-template-areas represents a single row in the grid. Each space-separated set of values within each string represents columns in the grid.

The Grid Areas are defined in the grid container. This is done using the grid-template-areas property.

Example CSS

.gridBox {
  display: grid;
  grid-template-rows: 4em auto 2em;
  grid-template-columns: 16em 1fr 20em;
  grid-template-areas:
    "nav header header"
    "nav content sidebar"
    "nav footer footer"
  . . .
}

.gridBox > nav {
  grid-area: nav;
  . . .
}

.gridBox > header {
  grid-area: header;
  . . .
}

.gridBox > main {
  grid-area: content;
  . . .
}

.gridBox > aside {
  grid-area: sidebar;
  . . .
}

.gridBox > footer {
  grid-area: footer;
  . . .
}

CSS Basics: Get the Lowdown on Grid – A Beginner’s Guide to Everything You’ve Wanted to Learn

CSS Grid Tutorial

Contents of CSS Grid Tutorial

Basic Function of CSS Grid

CSS Grid – Overview of Most Important Terms

Grid Container

Grid Item

Grid Line

Grid Cell

Grid Row

Grid Column

Grid Track

Grid Area

Grid Gap

Fraction

`/* Define the Grid Container */`

Position Items in the Grid

`/* 3 Column Layout using CSS Grid */`

Assign Names to Grid Lines

Assign Names to Grid Areas