CSS Grid Layout

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS-positioned elements.

Grid Terminology

Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example, container is the grid container.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Grid Line

The dividing lines make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.

Grid Area

The total space is surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here are the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items but sub-item aren’t.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Cell

The space between two adjacent rows and two adjacent column grid lines. It’s a single “unit” of the grid. Here are the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid Properties

Properties for the Parent (Grid Container)

Display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:
- grid – generates a block-level grid
- inline-grid – generates an inline-level grid
```
 .container {
   display: grid | inline-grid;
 }
```
grid-template-columns & grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:
- <track-size> – can be a length, a percentage, or a fraction of the free space in the grid using the fr unit.
- <line-name> – an arbitrary name of your choosing.
```
.container { 
     grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; 
}
```
  Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the last row). But you can choose to explicitly name the lines. Note the bracket syntax for the line names in the above example. Note that a line can have more than one name. For example, the second line will have two names: row1-end and row2-start. If your definition contains repeating parts, you can use the repeat() notation to streamline things:
```
.container {
  grid-template-columns: repeat(3, 20px [col-start]); 
} 
/* Which is equivalent to */ 
.container {
 grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; 
}
```
The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one-third the width of the grid container:
```
.container { grid-template-columns: 1fr 1fr 1fr; }
```
grid-template-area

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Values:
- <grid-area-name> – the name of a grid area specified with grid-area
- . – a period signifies an empty grid cell
- none – no grid areas are defined
```
.container {
grid-template-areas: 
"<grid-area-name> | . | none | ..."
"...";
}
```
  For Example:
```
.item-a {
grid-area: header;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: 
"header header header header"
"footer footer footer footer";
}
```
  That’ll create a grid that’s four columns wide by three rows tall. The entire top row will be composed of the header area. The last row is all footer.
grid-template

Shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Values:
- none – sets all three properties to their initial values
- <grid-template-rows> / <grid-template-columns> – sets grid-template-columns and grid-template-rows to the specified values, respectively, and sets grid-template-areas to none
```
.container {
   grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
```
Example:
```
.container {
 grid-template:
 [row1-start] "header header header" 25px [row1-end]
 [row2-start] "footer footer footer" 25px [row2-end]
 / auto 50px auto;
}
```
Since grid-template doesn’t reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it’s recommended to use the grid property instead of grid-template.

column-gap, row-gap, grid-column-gap, grid-row-gap

Specifies the size of the grid lines. You can think of it as setting the width of the gutters between the columns/rows.

Values:

<line-size> – a length value

The gutters are only created between the columns/rows, not on the outer edges.

.container {
/* standard */
column-gap: <line-size>;
row-gap: <line-size>;
/* old */
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}

Example:

.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px; 
column-gap: 10px;
row-gap: 15px;
}

gap, grid-gap

A shorthand for row-gap and column-gap

Values:

<grid-row-gap> <grid-column-gap> – length values

If no row-gap is specified, it’s set to the same value as column-gap

.container {
/* standard */
gap: <grid-row-gap> <grid-column-gap>;
/* old */
grid-gap: <grid-row-gap> <grid-column-gap>;
}