grid-by-examples-1
revision:
Content
defining a grid
top
code:
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
<style>
.wrapper {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box {background-color: #444;color: #fff; border-radius: 5px; padding: 20px;font-size: 10%; }
}
</style>
line-based placement
top
positioning items on the grid using line numbers
code:
<div class="wrapper1">
<div class="box1 a1">A</div>
<div class="box1 b1">B</div>
<div class="box1 c1">C</div>
<div class="box1 d1">D</div>
<div class="box1 e1">E</div>
<div class="box1 f1">F</div>
</div>
<style>
.wrapper1 {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box1 {background-color: lightgreen;color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;
&.a1{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;}
&.b1{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;}
&.c1{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;}
&.d1{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;}
&.e1{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;}
&.f1{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;}
}
}
</style>
positioning items on the grid using shorthand properties: grid-row, grid-column
code:
<div class="wrapper2">
<div class="box2 a2">A</div>
<div class="box2 b2">B</div>
<div class="box2 c2">C</div>
<div class="box2 d2">D</div>
<div class="box2 e2">E</div>
<div class="box2 f2">F</div>
</div>
<style>
.wrapper2 {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey;
width: 40vw; height: 20vw;
& .box2 {background-color: lightgreen;color: #fff; border-radius: 5px; padding: 20px;font-size: 150%;
&.a2{ grid-column: 2/3; grid-row: 1/2;}
&.b2{ grid-column: 2/3; grid-row: 2/3;}
&.c2{ grid-column: 3/4; grid-row: 2/3;}
&.d2{ grid-column: 1/2; grid-row: 1/2;}
&.e2{ grid-column: 1/2; grid-row: 2/3;}
&.f2{ grid-column: 3/4; grid-row: 1/2;}
}
</style>
positioning items on the grid using shorthand properties: grid-area
code:
<div class="wrapper3">
<div class="box3 a3">A</div>
<div class="box3 b3">B</div>
<div class="box3 c3">C</div>
<div class="box3 d3">D</div>
<div class="box3 e3">E</div>
<div class="box3 f3">F</div>
</div>
<style>
.wrapper3 {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box3 {background-color: lightgreen;color: #000; border-radius: 5px; padding: 20px;
font-size: 150%;
&.a3{ grid-area: 1/2/2/3;}
&.b3{ grid-area: 2/2/3/3;}
&.c3{ grid-area: 2/3/3/4;}
&.d3{ grid-area: 1/1/2/2;}
&.e3{ grid-area: 2/1/3/2;}
&.f3{ grid-area: 1/3/2/4;}
}
}
</style>
positioning items which span more than one grid track
code:
<div class="wrapper4">
<div class="box4 a4">A</div>
<div class="box4 b4">B</div>
<div class="box4 c4">C</div>
<div class="box4 d4">D</div>
</div>
<style>
.wrapper4 {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box4 {background-color: lightgreen;color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;
&.a4{ grid-column: 1 / 3; grid-row: 1;}
&.b4{ grid-column: 3; grid-row: 1/3;}
&.c4{ grid-column: 1; grid-row: 2;}
&.d4{ grid-column: 2; grid-row: 2;}
}
}
</style>
positioning items using the "span" keyword
code:
<div class="wrapper5">
<div class="box5 a5">A</div>
<div class="box5 b5">B</div>
<div class="box5 c5">C</div>
<div class="box5 d5">D</div>
</div>
<style>
.wrapper5 {display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px;
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box5 {background-color: lightgreen;color: #000; border-radius: 5px; padding: 20px;
font-size: 150%;
&.a5{ grid-column: 1 / span 2;}
&.b5{ grid-column: 3; grid-row: 1 / span 2;}
&.c5{ grid-column: 1; grid-row: 2;}
&.d5{ grid-column: 2; grid-row: 2;}
}
}
</style>
positioning items using named lines
code:
<div class="wrapper6">
<div class="box6 a6">A</div>
<div class="box6 b6">B</div>
<div class="box6 c6">C</div>
<div class="box6 d6">D</div>
</div>
<style>
.wrapper6 {display: grid; grid-gap: 10px; grid-template-columns: [col1-start] 100px [col2-start]
100px [col3-start] 100px [col3-end]; grid-template-rows: [row1-start] auto [row2-start] auto
[row2-end]; background-color: lightgreen; color: darkgrey; width: 40vw; height: 20vw;
& .box6 {background-color: navy;color: #fff; border-radius: 5px; padding: 20px;font-size: 150%;
&.a6{ grid-column: col1-start /col3-start; grid-row: row1-start;}
&.b6{ grid-column: col3-start; grid-row: row1-start / row2-end;}
&.c6{ grid-column: col1-start; grid-row: row2-start;}
&.d6{ grid-column: col2-start; grid-row: row2-start;}
}
}
</style>
positioning items using named lines with spans
code:
<div class="wrapper7">
<div class="box7 a7">A</div>
<div class="box7 b7">B</div>
<div class="box7 c7">C</div>
<div class="box7 d7">D</div>
<div class="box7 e7">E</div>
</div>
<style>
.wrapper7 {display: grid; grid-gap: 10px; grid-template-columns: [col] 100px [col] 100px
[col] 100px [col] 100px; grid-template-rows: [row] auto [row] auto [row];
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;
& .box7 {background-color: pink;color: #000; border-radius: 5px; padding: 20px;font-size: 150%;
&.a7{ grid-column: col / span 2; grid-row: row;}
&.b7{ grid-column: col 3 / span 2; grid-row: row; }
&.c7{ grid-column: col; grid-row: row 2;}
&.d7{ grid-column: col 2 / span 3; grid-row: row 2;}
&.e7{ grid-column: col /span 4; grid-row: row 3;}
}
}
</style>
using "repeat" notation
top
code:
<div class="wrapper8">
<div class="box8 a8">A</div>
<div class="box8 b8">B</div>
<div class="box8 c8">C</div>
<div class="box8 d8">D</div>
<div class="box8 e8">E</div>
</div>
<style>
.wrapper8 {display: grid; grid-gap: 10px; grid-template-columns: repeat(4, [col] 100px);
grid-template-rows: repeat (3, [row] auto); background-color: skyblue; color: darkgrey;
width: 40vw; height: 20vw;
& .box8 {background-color: violet; color: #000; border-radius: 5px; padding: 20px;font-size: 150%;
&.a8{ grid-column: col / span 2; grid-row: row;}
&.b8{ grid-column: col 3 / span 2; grid-row: row; }
&.c8{ grid-column: col; grid-row: row 2;}
&.d8{ grid-column: col 2 / span 3; grid-row: row 2;}
&.e8{ grid-column: col /span 4; grid-row: row 3;}
}
}
</style>
explicit and implicit grid
top
code:
<div class="wrapper9">
<div class="box9 a9">A</div>
<div class="box9 b9">B</div>
<div class="box9 c9">C</div>
<div class="box9 d9">D</div>
<div class="box9 e9">E</div>
</div>
<style>
.wrapper9 {display: grid; grid-gap: 10px; grid-template-columns: 100px 100px 100px;
grid-auto-columns: 100px; background-color: skyblue; color: darkgrey;
width: 40vw; height: 20vw;
& .box9 {background-color: indigo; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;
&.a9{ grid-column: 1 /3 ; grid-row: 1;}
&.b9{ grid-column: 3 ; grid-row: 1 / 3; }
&.c9{ grid-column: 1 ; grid-row: 2;}
&.d9{ grid-column: 2 ; grid-row: 2;}
&.e9{ grid-column: 4 / 5 ; grid-row: 1 / 4;}
}
}
</style>
defining grid areas
top
code:
<div class="wrapper10">
<div class="box10 header">Header</div>
<div class="box10 sidebar">Sidebar</div>
<div class="box10 content">Content</div>
</div>
<style>
.sidebar{grid-area: sidebar;}
.content{grid-area: content;}
.header{grid-area: header;}
.wrapper10{display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px;
grid-template-areas:
"....... header header"
"sidebar content content";
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;}
.box10{background-color: grey; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.header{background-color: lightgrey; }
</style>
no clearing required
top
Content
More content than we had before so this column is now quite tall.
code:
<div class="wrapper11">
<div class="box11 header11">Header</div>
<div class="box11 sidebar11">Sidebar</div>
<div class="box11 content11">Content
<br/> More content than we had before so this column is now quite tall.</div>
<div class="box11 footer11">footer</div>
</div>
<style>
.sidebar11{grid-area: sidebar11;}
.content11{grid-area: content11;}
.header11{grid-area: header11;}
.footer11{grid-area: footer11;}
.wrapper11{display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px;
grid-template-areas:
"....... header11 header11"
"sidebar11 content11 content11"
"footer11 footer11 footer11";
background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;}
.box11{background-color: salmon; color: #fff; border-radius: 5px; padding: 10px; font-size: 150%;}
.header11, .footer11{background-color: lightgrey; }
</style>
redefining grid areas with media queries
top
Content
More content than we had before so this column is now quite tall.
code:
<div class="wrapper12">
<div class="box12 header12">Header</div>
<div class="box12 sidebar12">Sidebar</div>
<div class="box12 sidebar12_2">Sidebar 2</div>
<div class="box12 content12">Content
<br/> More content than we had before so this column is now quite tall.</div>
<div class="box11 footer12">footer</div>
</div>
<style>
.sidebar12{grid-area: sidebar12;}
.sidebar12_2{grid-area: sidebar12_2;}
.content12{grid-area: content12;}
.header12{grid-area: header12;}
.footer12{grid-area: footer12;}
.wrapper12{ background-color: skyblue; color: darkgrey; width: 40vw; height: 20vw;}
.wrapper12{display: grid; grid-gap: 1em; grid-template-areas: "header12" "sidebar12" "content12"
"sidebar12_2" "footer12"; }
@media only screen and (min-width: 500px){
.wrapper12{grid-template-columns: 20% auto; grid-template-areas:
"header12 header12"
"sidebar12 content12"
"sidebar12_2 sidebar12_2"
"footer12 footer12";
}
}
@media only screen and (min-width: 600px){
.wrapper12{grid-gap: 20px; grid-template-columns: 120px auto ; grid-template-areas:
"header12 header12 header12"
"sidebar12 content12 sidebar12_2"
"footer12 footer12 footer12";
max-width: 600px;}
}
.box12{background-color: crimson; color: #fff; border-radius: 5px; padding: 10px; font-size: 150%;}
.header12, .footer12{background-color: lightgrey; }
.sidebar12_2{background-color: green; color: black;}
</style>
layering items
top
code:
<div class="wrapper_1">
<div class="box_1 a_1">A</div>
<div class="box_1 b_1">B</div>
<div class="box_1 c_1">C</div>
<div class="box_1 d_1">D</div>
<div class="box_1 e_1">E</div>
<div class="box_1 f_1">F</div>
</div>
<style>
.wrapper_1 {display: grid; grid-gap: 10px; grid-template-columns: repeat(5, [col] 100px );
grid-template-rows: repeat(3, [row] auto ); background-color: orange; color: #444;
width: 40vw; height: 20vw;}
.box_1 {background-color: skyblue; color: black; border-radius: 5px; padding: 20px; font-size: 150%; z-index:10; }
.a_1 {grid-column: col / span 2; grid-row: row ;}
.b_1 {grid-column: col 3 / span 3 ; grid-row: row ;}
.c_1 {grid-column: col ; grid-row: row 2 ;}
.d_1 {grid-column: col 2 / span 3 ; grid-row: row 2 ;}
.e_1 {grid-column: col / span 5 ; grid-row: row 3;}
.f_1 { grid-column: col 3 / span 3; grid-row: row 2 ; background-color: rgba(49,121,207, 0.5); z-index: 20;}
</style>
a grid item as a new positioning context
top
code:
<div class="wrapper_2">
<div class="box_2 header_2">Header</div>
<div class="box_2 sidebar_2">Sidebar</div>
<div class="box_2 content_2">Content
<br /> The four arrows are inline images inside the content area.
<img src="../images/smiley.png" alt="top left" class="topleft" width="5%"/>
<img src="../images/smiley.png" alt="top right" class="topright" width="5%" />
<img src="../images/smiley.png" alt="bottom left" class="bottomleft" width="5%"/>
<img src="../images/smiley.png" alt="bottom right" class="bottomright" width="5%"/>
</div>
<div class="box_2 footer_2">Footer</div>
</div>
<style>
.sidebar_2 {grid-area: sidebar_2;}
.content_2 {grid-area: content_2; position: relative; }
.header_2 { grid-area: header_2;}
.footer_2 { grid-area: footer_2;}
.wrapper_2 { display: grid; grid-gap: 10px; grid-template-columns: 200px 200px 200px; grid-template-areas:
"header_2 header_2 header_2"
"sidebar_2 content_2 content_2"
"footer_2 footer_2 footer_2";
background-color: saddlebrown;color: #444;}
.box_2 { background-color: indigo; color: #fff; border-radius: 5px; padding: 50px; font-size: 150%;}
.header_2, .footer_2 { background-color: #999;}
.topleft {position: absolute; top: 0; left: 0;}
.topright {position: absolute; top: 0; right: 0; }
.bottomleft {position: absolute; bottom: 0; left: 0; }
.bottomright { position: absolute; bottom: 0; right: 0;}
</style>
percentage based grids and gaps
top
To see the gap you need Chrome 55 or Firefox.
A grid with a width of 90%. Six column tracks of 10% each, 5 gutter tracks of 2% each.
The grid-gap property controls columns and rows but as the grid has no height, the row gap resolves to 0.
1
2
3
4
5
6
7
8
9
10
11
12
If we give the grid a height, there is something for 2% to be a percentage of. So we get a gap.
1
2
3
4
5
6
7
8
9
10
11
12
code:
<div class="wrapper_3">
<div class="box_3 box1_3">1</div>
<div class="box_3 box2_3">2</div>
<div class="box_3">3</div>
<div class="box_3">4</div>
<div class="box_3">5</div>
<div class="box_3">6</div>
<div class="box_3">7</div>
<div class="box_3">8</div>
<div class="box_3">9</div>
<div class="box_3">10</div>
<div class="box_3">11</div>
<div class="box_3">12</div>
</div>
<style>
.box_3 { background-color: #444; color: #fff; border-radius: 5px;
padding: 20px; font-size: 150%;}
.box_3:nth-child(even) {background-color: #ccc; color: #000;}
.wrapper_3 { width: 90%; display: grid; grid-gap: 2%; grid-template-columns: repeat(6, 10%);
border:1px solid #000; margin-bottom: 2em;}
</style>
code:
<div class="wrapper_4 with-height">
<div class="box_4 box1_4">1</div>
<div class="box_4 box2_4">2</div>
<div class="box_4">3</div>
<div class="box_4">4</div>
<div class="box_4">5</div>
<div class="box_4">6</div>
<div class="box_4">7</div>
<div class="box_4">8</div>
<div class="box_4">9</div>
<div class="box_4">10</div>
<div class="box_4">11</div>
<div class="box_4">12</div>
</div>
<style>
.box_4 { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.box_4:nth-child(even) {background-color: #ccc; color: #000;}
.wrapper_4 { width: 90%; display: grid; grid-gap: 2%; grid-template-columns: repeat(6, 10%); border:1px solid #000; margin-bottom: 2em;}
.with-height {height: 400px;}
</style>
