<h2>Birinci örnek</h2>

<main>
  <aside></aside>
  <div class="content"></div>
  <nav></nav>
</main>

<h2>İkinci örnek</h2>

<main>
  <aside></aside>
  <div class="content"></div>
  <nav></nav>
</main>


<h2>Üçüncü örnek</h2>

<main>
  <aside></aside>
  <div class="content"></div>
  <nav></nav>
</main>
main {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 100px;
}

main > * {
  background-color: lightblue;
  border: 1px solid black;
}

main ~ main {
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-gap: 2%;
}

main:last-child {
  grid-gap: 3%;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather Sans', sans-serif;
}

h2 {
  margin: 0;
  padding: 10px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800

External JavaScript

This Pen doesn't use any external JavaScript resources.