> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/part-1-flexbox-and-grids/1.2-grids.md).
# 1.2: Grids
There is more to grids than flexbox, so let's pause here to learn more about grids.
Along with **containers(parents)** and **items(children)**, grids have **cells**, **tracks** and **areas**.
**Cell**: one(1) unit
**Track**: range bordered by two(2) lines
**Area**: range bordered by four(4) lines
## Grid Components
| Property | Value |
| --------------------- | ------ |
| grid-template-columns | fr |
| grid-template-rows | auto |
| grid-template-areas | repeat |
| grid-area | minmax |
Using **grid-templates** allows developer to, not only have consistency between sections and pages or their site, but also allows more precise placement of items that will function as you want them to do even with a change in viewport size. Additionally, it allows for easier item placement when using **order** and **media queries**.
Grid **columns** and **rows** can be delineated by
### **Numbered lines**
.
Below are layout examples using all three methods.
When defining a grid it is essential that you define the **box size**. (asterisk(\*) represents "universal" and will apply to all)
\*`{box-sizing: border-box;}`
#### Numbered lines
```markup
One
Two
Three
Four
Five
Six
```
```css
* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
```
```css
.wrapper > div {
border: 2px solid rgba(0,128,128,1.0);
border-radius: 5px;
background-color: rgba(0,128,128,.7);
padding: 1em;
color: #ffffff;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
```
### Named lines
With some minor adjustments, using **grid-column/row-start/end**, the above CSS could be written as
```css
.wrapper {
display: grid;
grid-template-columns:
[grid-start] 1fr
[main-start] 1fr
[main-end] 1fr
[grid-end];
grid-template-rows
[grid-start] 100px
[main-start] 100px
[main-end] 100px
[grid-end] 100px;
}
.one {
grid-column-start: grid-start;
grid-column-end: main-end;
/*or grid-column: grid-start / main-end; */
grid-row-start: grid-start;
grid-row-end: main-start;
/*or grid-row: grid-start; */
}
.two {
grid-column-start: main-start;
grid-column-end: grid-end;
/*OR grid-column: main-start / grid-end; */
grid-row-start: grid-start;
grid-row-end: main-end;
/*OR grid-row: grid-start / main-end; */
}
.three {
grid-column-start: grid-start;
/*OR grid-column: grid-start; */
grid-row-start: main-start;
grid-row-end: grid-end;
/*OR grid-row: main-start / grid-end; */
}
.four {
grid-column-start: main-end;
/*OR grid-column: main-end; */
grid-row-start: main-end;
/*OR grid-row: main-end; */
}
.five {
grid-column-start: main-start;
/*OR grid-column: main-start; */
grid-row-end: grid-end;
/*OR grid-row: grid-end; */
}
.six {
grid-column-start: main-end;
/*OR grid-column: main-end; */
grid-row-end: grid-end;
/*OR grid-row: grid-end; */
}
```
Grid
```css
* {box-sizing: border-box;}
.wrapper {
max-width: 500px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgba(0,0,0,1.0);
background-color: rgba(0,128,128,.3);
padding: 1em;
color: white;
}
.wrapper {
display: grid;
grid-template-columns:
[grid-start] 2fr
[main-start] 2fr
[main-end] 2fr
[grid-end];
grid-template-rows:
[grid-start] 100px
[main-start] 100px
[main-end] 100px
[grid-end];
border: 3px solid ;
}
.box {
border: 2px solid black;
}
.one {
grid-column-start: grid-start;
grid-column-end: grid-end;
grid-row-start: grid-start;
grid-row-end: main-start;
}
.two {
grid-column-start: grid-start;
grid-column-end: grid-end;
grid-row-start: main-start;
grid-row-end: main-end;
}
.three{
grid-column-start: grid-start;
grid-column-end: grid-end;
grid-row-start: main-end;
grid-row-end: grid-end;
}
.four {
grid-column-start: grid-start;
grid-column-end: main-start;
grid-row-start: grid-start;
grid-row-end: grid-end;
}
.five {
grid-column-start: main-start;
grid-column-end: main-start;
grid-row-start: grid-start;
grid-row-end: grid-end;
}
.six {
grid-column-start: main-end;
grid-column-end: grid-end;
grid-row-start: grid-start;
grid-row-end: grid-end;
}
```
#### Named areas
Look closely at where the columns and rows layout.
```css
.header {
grid-area: hd;
}
.sidebar {
grid-area: sd;
}
.main {
grid-area: content;
}
.footer {
grid-area: ft;
}
.wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd content"
". . . ft ft ft ft ft";
}
```
NOTE:
"." is used as a placeholder. Instead of the footer spanning the entire width, it only occupies three(3) of the nine(9) columns that we designated in our template.
```markup
Grid centered Item w/content
```
### EXPLORE MORE
We will be using one(1) **container** with three(3) columns and two(2) rows to look at the capabilities of the grid system.
In section 1.1 we saw a **container** with five(5) **items** within a container comprised of one(1) column and five(5) rows.
Value focus: **span, relative and absolute values,**
```markup
Grid Span
```
```css
.wrapper{
display: grid;
grid-template-columns: 200px 200px 200px;
border: 2px solid rgb(0,128,128);
border-radius: 5px;
text-align: center;
}
.wrapper > div {
border: 2px solid rgb(0,128,128);
border-radius: 5px;
background-color: rgba(0,128,128,0.3);
padding: 1em;
color: #FFF;
}
.track {
grid-column: 1;
grid-row: span 2;
}
```
We covered lengths at the beginning of the section. Columns and rows can use **relative** or **absolute** lengths. Above we see that the grid columns are set to an absolute length of 200px and rows set to auto.
**columns/rows** can be set the following ways:
* **200px 200px 200px**
* **1fr 1fr 1fr** ( is the same as **repeat(3, 1fr)** )
* **1fr 1fr 200px**
* **20px 1fr 200px**
* **2fr 1fr 1fr**
* **1fr auto 10%**
### Challenges
Write code for the following grids
