CSS Grid Areas

CSS Grid Areas

Wow, CSS Grid is impressive! Not just CSS Grid, but CSS Grid Areas! One can make a great layout with CSS grid in little time!

I never really took time to invest in different ways to make a page layout. There are millions of different ways to make a layout on a page. I would usually just stick to one or two methods.

I knew I had to pick up CSS Grid sometime. Eventually I was making an interesting layout at work, and my head said to try out CSS Grid. So I did. At the end of implementing a grid layout, I was impressed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'nav nav'
    'article aside'
    'footer footer';
}

nav {
  grid-area: nav;
}

article {
  grid-area: article;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

Designate the parent element’s display as grid. To use grid areas, a grid-template-columns property must be used. Specify the size of their columns. Then add another attribute in parent grid-template-areas with tag names to specify the grid layout. The grid template area layout format was weird at first, but I got used to it. Each row is designated by quote pairs. Each column is separated by a space.

In the grid children, specify grid-area and that child will use the tagged area in the parent! For example, since grid area nav was assigned two columns, the child nav will expand those two columns. This also means that the HTML layout could be whatever. CSS Grid will move HTML elements out of their default flow and into their assigned areas.