<h2>Normal şartlarda</h2>

<main>
  <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt.</aside>
  <div class="content">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip</div>
  <nav>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id</nav>
</main>

<h2>Uzun içerikli durumlarda</h2>

<main>
  <aside>uzuniçeriklibirdurumolduğundaneolur</aside>
  <div class="content">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip</div>
  <nav>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id</nav>
</main>


<h2>Sabit genişlikli resimlerin olduğu durumlarda</h2>

<main>
  <aside><img src="https://fatihhayrioglu.com/images/koy_01.jpg" alt=""></aside>
  <div class="content">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip</div>
  <nav>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id</nav>
</main>
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

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

body {
  margin: 0 auto;
  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.