CSS Grid

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>

Let’s add two even 50% columns.

.container {
  display: grid;
  grid-template-columns: 50% 50%;
}

Or how about 3 even 33.33% columns.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

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;
}

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);
}

grid-template-* provides flexibility. We can use percentages, fractions, repeat, and even auto.

.container {
  display: grid;
  grid-template-columns: 20% auto 20%;
}

gap. seems legit.

.container {
  display: grid;
  grid-template-columns: 20% auto 20%;
  grid-gap: 15px;
}

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;
}

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;
}

Let’s tweak the height of the grid.

.container {
  display: grid;
  grid-template-columns: 20% auto 20%;
  grid-gap: 15px;
  height: 400px;
}

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;
}