Grid Item Named

Naming Grid Items with grid-area

The CSS grid-template-areas is a grid container property, and it specifies areas within the grid layout.

You can name grid items by using the CSS grid-area property, and then reference to the name in the grid-template-areas property.

Each area is defined within apostrophes. The named grid items in each area is defined inside the apostrophes, separated by a space.

Example

Example Code

css

Try it Yourself

.container {
  display: grid;
  grid-template-areas: 'myHeader
  myHeader myHeader myHeader myHeader';
}

.item1 {
  grid-area:
  myHeader;
}

We can use a period sign (.) to refer to a grid item with no name:

Example

Example Code

css

Try it Yourself

.container {
  display: grid;
  grid-template-areas: 'myHeader
  myHeader myHeader . .';
}

.item1 {
  grid-area:
  myHeader;
}

To define two rows (two areas), define the second row inside another set of apostrophes:

Example

Example Code

css

Try it Yourself

.container {
  display: grid;
  grid-template-areas:
    'myHeader
  myHeader
  . . .'
    'myHeader myHeader . . .';
}

.item1 {
  grid-area:
  myHeader;
}

Make a ready-to-use Webpage Template

Here, we will name all grid items to make a ready-to-use webpage template:

Example

Example Code

css

Try it Yourself

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
  grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
  footer; }

.container {
  display: grid;
  grid-template-areas:

  'header header header header header header'
    'menu main
  main main main right'
    'menu footer footer footer footer
  footer';
}

Naming Grid Items with grid-area

Example

Example Code

Example

Example Code

Example

Example Code

Make a ready-to-use Webpage Template

Example

Example Code

Interactive Code Examples

CSS Example 1

CSS Example 2

CSS Example 3

CSS Example 4