Helen Kent

Posted on Jan 6, 2020 • Edited on Jan 8, 2020

Codecademy - CSS 9: Advanced Grid

#css #100daysofcode #womenintech #codenewbie

What i've learnt from the advanced grid lesson of Codecademy's CSS course.

This lesson covered:
- grid-template-areas
- justify-items
- justify-content
- justify-self
- align-items
- align-content
- align-self
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
- implicit and explicit grids
- grid axes
It took me a while to get my head around this and i'm not 100% sure how it works...

Grid-template-areas

This property allows you to name sections of your web page to use as values in your grid-row-start, grid-row-end, grid-col-start, grid-col-end, and grid-area properties.
This property is declared on the grid container.
Read through the code below:

HTML
<body>
  <div class="container">
    <header>
      <h1>Header</h1>
    </header>
    <nav>
      <h1>Nav</h1>
    </nav>
    <section class="left">
      <h2>Left</h2>
    </section>
    <section class="right">
      <h2>Right</h2>
    </section>
    <footer>
      <h1>Footer</h1>
    </footer>
  </div>
</body>

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-gap: 10px;
  grid-template-areas: "header header"
                        "nav nav"
                        "left right"
                        "footer footer";
  grid-template-columns: 200px 400px;
  grid-template-rows: 150px 200px 600px 200px;
}

h1, h2 {
  font-family: monospace;
  text-align: center;
}

header {
  background-color: dodgerblue;
  grid-area: header;
}

nav {
  background-color: beige;
  grid-area: nav;
}

.left {
  background-color: dodgerblue;
  grid-area: left;
}

.right {
  background-color: beige;
  grid-area: right;
}

footer {
  background-color: dodgerblue;
  grid-area: footer;
}

The code above creates this:
The grid-template-areas values in speech marks specify the number of rows (4 in this example, one for each set of speech marks) and for each row, how many columns the items take up. The third row is set as "left right" because in one row there are two columns, one taken up by the item "left" and one taken up by "right"

Overlapping Elements

You can specify, using grid-area and its values, that elements can overlap each other.
If this happens, you can use the property z-index to state which element will be on top etc.
In the code below, it is set up so that there is a grid with 8 rows and 6 columns. There are three items in the container - info, services and an image.
The grid-area values state the gridlines at which the item starts and finishes

.container {
  display: grid;
  grid-template: repeat(8, 200px) / repeat(6, 100px);
}

.info {
  grid-area: 1 / 1 / 9 / 4;
}

.services {
  grid-area: 1 / 4 / 9 / 7;
}

img {
  grid-area: 2 / 3 / 5 / 5;
  z-index: 5;
}

This would look like the image below and it would put the image on top.
I tested the z-index value from 1-10 and it always put the image on top - would like to know why this happened if anyone can help please!

Justify-items

There are two axes in grid layout. The column (or block) axis and the row (or inline) axis.
The justify-items property aligns elements along the row/inline axis and it accepts the following values amongst others:
- start - aligns items to the left
- end - aligns items to the right
- center - aligns items to the centre
- stretch - stretches items to fill the grid
This property is declared on the grid container.

main {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: repeat(3, 450px);
  grid-gap: 20px;
  margin-top: 44px;
  grid-auto-rows: 500px;
  justify-items: center;
}

Justify-content

You can also position a grid within its parent element.
You can use justify-content to position the entire grid along the row axis. It accepts these values amongst others:
- start — aligns the grid to the left side of the grid container
- end — aligns the grid to the right side of the grid container
- center — centers the grid horizontally in the grid container
- stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container
- space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
- space-between — includes an equal amount of space between grid items and no space at either end
- space-evenly — places an even amount of space between grid items and at either end
This property is declared on the grid container.
In the example below, there is a grid that is 1000px wide but it only has two columns that total 600px. So there is 400px of unused space. You use justify-content to specify where the grid is placed within that large space.

HTML
<main>
  <div class="left">Left</div>
  <div class="right">Right</div>
</main>

CSS
main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

Align-items

Align-items works very similarly to justify-items, except it is aligning the items from top to bottom within the grid space, rather than from left to right.
Some of the values (amongst others) that are accepted are:
- start — aligns grid items to the top side of the grid area
- end — aligns grid items to the bottom side of the grid area
- center — aligns grid items to the center of the grid area
- stretch — stretches all items to fill the grid area
This property is declared on the grid container.

main {
  display: grid;
  grid-template-rows: repeat(3, 400px);
  align-items: center;
}

Align-content

Align-content works very similarly to justify-content, except it is aligning the grid within the grid container from top to bottom, rather than left to right.
Some of the possible values align-content accepts are:
- start — aligns the grid to the top of the grid container
- end — aligns the grid to the bottom of the grid container
- center — centers the grid vertically in the grid container
- stretch — stretches the grid items to increase the size of the grid to expand vertically across the container
- space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
- space-between — includes an equal amount of space between grid items and no space at either end
- space-evenly — places an even amount of space between grid items and at either end
As before, if the grid container is for example, 1600px, but the grid has 3 rows of 400px each, there are an empty 400px. You can use align-content to state where the grid goes within this space from top to bottom.
This property is declared on the grid container.

main {
  display: grid;
  height: 600px;
  rows: 200px 200px;
  grid-template-areas: "top"
                       "bottom"; 
  align-content: center;
}

Align-self and justify-self

These two properties allow you to align (top to bottom) or justify (left to right) the elements in the individual grid boxes.
If you use these properties they overrule justify-items and align-items.
They take the values start, end, center and stretch amongst others.
These properties are declared on the grid items.

.a {
  align-self: end;
}

.c {
  justify-self: start;
}

Implicit vs Explicit Grid

So far we've been specifying the sizes of the grids which is ok for some sites.
Sometimes this will not be any good - e.g. on an online shopping site where a customer searches for a product, a different number of results will be brought back each time.
If more items are returned for the grid, something called the implicit grid takes over.
The default behaviour for this is that items fill up rows first and add new rows as necessary.
New grid rows will only be tall enough to contain the content within them.
Its important to know how to change this default behaviour.

Grid-auto-rows and grid-auto-columns

These properties allow you to specify the size of rows and columns that are added implicitly.
They accept the same values as grid-template-rows and grid-template-columns (px, %, fr, repeat())
This property is declared on the grid container.

Grid-auto-flow

This property allows you to set how the extra grid items are rendered - whether they are added to new rows or new columns.
It accepts these values:
- row — specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default)
- column — specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements
- dense — this keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added
You can pair the values like this grid-auto-flow: column dense;
This property is declared on the grid container.

That's it for advanced grid on codecademy!

EDIT: I don't know if it's mega cheating to use this, but I found it and don't want to forget it - design a grid and set out the divs and ask for the code... https://cssgrid-generator.netlify.com/

Top comments (3)

Helen Kent • Jan 8 '20

That's a good way to think about it, thank you!
I used it because that was the instruction in the tutorial - without the z-index property the element was beneath another square. When it was included it was on top but the tutorial said to give it the value of 5, which confused me, because 1-10 did the same thing. Does that make sense?

DEV Community