Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS grid-template

Grid is a layout system that uses a grid with rows and columns.

A grid-template defines rows, columns, and areas in a grid layout.

It's a shorthand for 3 properties that define rows, columns, and areas.

Example

#

Item 2 is defined as a grid area spanning 2 rows and 3 columns.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template:
      '. area2 area2 . . .'
      '. area2 area2 . . .'
      '. area2 area2 . . .';
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>

  <div style="grid-area: area2;
              color: white;
              background-color: salmon;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div> 

Using grid-template

A grid is like a table but with responsive layouts and easier CSS styling.

The grid-template property is a shorthand for:

Syntax

grid-template: none | grid-template-rows / grid-template-columns | 
               grid-template-areas | initial | inherit;

Values

#

Value Description
none Default. Rows and columns are not positioned or resized.
grid-template-rows Sets the rows positioning and sizes
grid-template-columns Sets the columns positioning and sizes
grid-template-areas Defines area positioning and sizes
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

A grid-template that defines 5 named areas.

Header
Menu
Main
Right
Footer
<style>
  .grid-template {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
  }

  .grid-template > div {
    background-color: aliceblue;
    text-align: center;
    padding: 25px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-template">
  <div style="grid-area: header">Header</div>
  <div style="grid-area: menu">Menu</div>
  <div style="grid-area: main">Main</div>
  <div style="grid-area: right">Right</div>
  <div style="grid-area: footer">Footer</div>
</div>

A calculator grid layout.
Item 0 is defined as a grid area with 2 rows and 2 columns.

0
7
8
9
4
5
6
1
2
3
.
=
<style>
  .grid-container-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid: '. . . zero zero' '. . . zero zero';
  }

  .grid-container-example > div {
    background-color: aliceblue;
    text-align: center;
    padding: 10px;
    font-size: 24px;
  }
</style>

<div class="grid-container-example">
  <div style="grid-area: zero">0</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>.</div>
  <div>=</div>
</div>

Browser support

This table shows when grid-template support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides