I write stuff. sometimes.

CSS Grid

clever thing.

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;
}
Nav
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;
}
Nav
Main
Aside

Let's tweak the height of the grid.

.container {
  display: grid;
  grid-template-columns: 20% auto 20%;
  grid-gap: 15px;
  height: 400px;
}
Nav
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;
}
Nav
Main
Aside