Cheat Sheet

Nine divs contained within a parent div. Parent div is set todisplay: grid;andgrid-template-columns: 20% 50% 30%;.

Nine divs contained within a parent div.

HTML:

<div class="demo-grid-container">
<div class="demo-box">1</div>
<div class="demo-box">2</div>
<div class="demo-box">3</div>
<div class="demo-box">4</div>
<div class="demo-box">5</div>
<div class="demo-box">6</div>
<div class="demo-box">7</div>
<div class="demo-box">8</div>
<div class="demo-box">9</div>
</div>

Add CSS so that the parent div is set todisplay: grid;andgrid-template-columns: 20% 50% 30%;.

CSS:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template-columns: 20% 50% 30%;
}

.demo-box {
border: blue solid 1px;
background-color: lightblue;
}

Output:

1
2
3
4
5
6
7
8
9

Addinggrid-template-rows: 10% 80% 10%;to the CSS for the parent div.

HTML:

<div class="demo-grid-container">
<div class="demo-box">1</div>
<div class="demo-box">2</div>
<div class="demo-box">3</div>
<div class="demo-box">4</div>
<div class="demo-box">5</div>
<div class="demo-box">6</div>
<div class="demo-box">7</div>
<div class="demo-box">8</div>
<div class="demo-box">9</div>
</div>

CSS:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template-columns: 20% 50% 30%;
grid-template-rows: 10% 80% 10%;
}

.demo-box {
border: blue solid 1px;
background-color: lightblue;
}

Output:

1
2
3
4
5
6
7
8
9

Addingrow-gap: andcolumn-gap: and reducing row and column sizes to accomodate.

HTML:

<div class="demo-grid-container">
<div class="demo-box">1</div>
<div class="demo-box">2</div>
<div class="demo-box">3</div>
<div class="demo-box">4</div>
<div class="demo-box">5</div>
<div class="demo-box">6</div>
<div class="demo-box">7</div>
<div class="demo-box">8</div>
<div class="demo-box">9</div>
</div>

CSS:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template-columns: 20% 48% 30%;
grid-template-rows: 10% 70% 10%;
row-gap: 5%;
column-gap: 1%;
}

.demo-box-1 {
border: blue solid 1px;
background-color: lightblue;
}

Output:

1
2
3
4
5
6
7
8
9

Child divs reduced to 3. Thengrid-row-start: andgrid-row-end:along withgrid-column-start: andgrid-column-end:are used to postition them within the grid layout.

Reduce child divs to 3.

HTML:

<div class="demo-grid-container">
<div class="demo-box-1">1</div>
<div class="demo-box-2">2</div>
<div class="demo-box-3">3</div>
</div>

Addinggrid-row-start: andgrid-row-end:along withgrid-column-start: andgrid-column-end:

CSS:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template-columns: 20% 48% 30%;
grid-template-rows: 10% 70% 10%;
row-gap: 5%;
column-gap: 1%;
}

.demo-box-1 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}

.demo-box-2 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}

.demo-box-3 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}

Output:

1
2
3

Replacing grid attributes with shorthand, changes highlighted.

CSS Grid Longhand:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template-columns: 20% 48% 30%;
grid-template-rows: 10% 70% 10%;
row-gap: 5%;
column-gap: 1%;
}

.demo-box-1 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}

.demo-box-2 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}

.demo-box-3 {
border: blue solid 1px;
background-color: lightblue;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}

CSS Grid Shorthand:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template:
10% 70% 10% / 20% 48% 30%;
gap: 5% 1%;
}

.demo-box-1 {
border: blue solid 1px;
background-color: lightblue;
grid-area: 1 / 1 / 2 / 4;
}

.demo-box-2 {
border: blue solid 1px;
background-color: lightblue;
grid-area: 2/ 1 / 4 / 3;
}

.demo-box-3 {
border: blue solid 1px;
background-color: lightblue;
grid-area: 2 / 3 / 4/ 4;
}

Output:

1
2
3

Defining grid locations using grid-template-areas: .

Five divs, one each for head, nav, content, sidebar and foot.

HTML:

<div class="demo-grid-container">
<div class="demo-box-head">
Head
</div>
<div class="demo-box-content">
Content
</div>
<div class="demo-box-nav">
Nav
</div>
<div class="demo-box-side">
Side
</div>
<div class="demo-box-foot">
Foot
</div>
</div>
<div class="demo-grid-container">
<div class="demo-box-head">Head</div>
<div class="demo-box-content">Content</div>
<div class="demo-box-nav">Nav</div>
<div class="demo-box-side">Side</div>
<div class="demo-box-foot">Foot</div>
</div>

Defining grid locations using grid-template-areas: .

CSS:

.demo-grid-container {
width: 370px;
height: 370px;
border: darkblue solid 1px;
display: grid;
padding: 1%;
grid-template:
10% 70% 10% / 20% 48% 30%;
gap: 5% 1%;
grid-template-areas:
"head head head"
"nav content side"
"foot foot foot";
}

.demo-box-head {
border: blue solid 1px;
background-color: lightblue;
grid-area: head;
}

.demo-box-nav {
border: blue solid 1px;
background-color: lightblue;
grid-area: nav;
}

.demo-box-content {
border: blue solid 1px;
background-color: lightblue;
grid-area: content;
}
.demo-box-side {
border: blue solid 1px;
background-color: lightblue;
grid-area: side; }

.demo-box-foot {
border: blue solid 1px;
background-color: lightblue;
grid-area: foot;
}

Output:

Head
Content
Nav
Side
Foot