<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;
}
This Pen doesn't use any external JavaScript resources.