# 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/part-1-flexbox-and-grids/1.2-grids.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.