Grid seems hard. So let’s simplify it.
Our basic markup
<style> .container { } .container > div { outline: 1px solid orange; }</style><div class="container"> <div>1</div> <div>2</div> <div>3</div> ... <div>10</div> <div>11</div> <div>12</div></div>1
2
3
4
5
6
7
8
9
10
11
12
Let’s add two even 50% columns.
.container { display: grid; grid-template-columns: 50% 50%;}1
2
3
4
5
6
7
8
9
10
11
12
Or how about 3 even 33.33% columns.
.container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%;}1
2
3
4
5
6
7
8
9
10
11
12
That gets tedious quick. So we can use fraction units to create an even 4 columns instead of 25%.
.container { display: grid; /* grid-template-columns: 25% 25% 25% 25%; */ grid-template-columns: 1fr 1fr 1fr 1fr;}1
2
3
4
5
6
7
8
9
10
11
12
Still… I hate typing so… repeat to the rescue.
.container { display: grid; /* grid-template-columns: 1fr 1fr 1fr 1fr; */ grid-template-columns: repeat(4, 1fr);}1
2
3
4
5
6
7
8
9
10
11
12
grid-template-* provides flexibility. We can use percentages, fractions, repeat, and even auto.
.container { display: grid; grid-template-columns: 20% auto 20%;}1
2
3
4
5
6
7
8
9
10
11
12
gap. seems legit.
.container { display: grid; grid-template-columns: 20% auto 20%; grid-gap: 15px;}1
2
3
4
5
6
7
8
9
10
11
12
Now we can hang some meaningful items on our grid positioned by column and row.
.container { display: grid; grid-template-columns: 20% auto 20%; grid-gap: 15px;}
.logo { grid-column: 1; grid-row: 1;}
nav { grid-column: 1; grid-row: 2;}
aside { grid-column: 3; grid-row: 1;}
main { grid-column: 2; grid-row: 1;}Logo
Main
Aside
And adjust the row span of aside and main.
aside { grid-column: 3; grid-row: 1 / span 2;}
main { grid-column: 2; grid-row: 1 / span 2;}Logo
Main
Aside
Let’s tweak the height of the grid.
.container { display: grid; grid-template-columns: 20% auto 20%; grid-gap: 15px; height: 400px;}Logo
Main
Aside
A problem appears, the logo is way too tall. We can utilize grid-template-rows to solve this.
.container { display: grid; grid-template-columns: 20% auto 20%; grid-template-rows: 60px auto; grid-gap: 15px; height: 400px;}Logo
Main
Aside