CSS Layout: Evolution Detailed by Example

Summary Timeline of Standards and Code related to Layout

Code

<table class="flowers">
<tr>
<td>
<img class="pix" src="images/cherry_blossom.jpg" alt="cherries"> </td>
<td>
<img class="pix" src="images/cherry_blossom.jpg" alt="cherries"> </td>
<td>
<img class="pix" src="images/cherry_blossom.jpg" alt="cherries"> </td>
</tr>
<tr>
<td>
<h3>First Place</h3>
<p class="comment">This is my favorite flower.</p>
</td>
<td>
<h3>Second Place</h3>
<p class="comment">This is my favorite flower</p>
</td>
<td>
<h3>Third Place</h3>
<p class="comment">This is my favorite flower</p>
</td>
</tr>
</table>
.flowers {
table-layout: fixed;
border-collapse: collapse;
}
td {
padding: 20px 20px 0 20px;
}
.pix {
width: 100%;
}
h3 {
text-align: center;
}
.comment {
padding: 0 30px;
font-size: 2rem;
text-align: center;
}
<section class="container">
<div class="row">
<div class="cell">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
<div class="cell">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
<div class="cell">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
</div>
<div class="row">
<div class="cell">
<h3>My Favorite Photo</h3>
</div>
<div class="cell">
<h3>My Favorite Photo</h3>
</div>
<div class="cell">
<h3>My Favorite Photo</h3>
</div>
</div>
</section>
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 20px;
text-align: center;
}
.cell img {
width: 100%;
}
<div class="row">
<div class="column">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
<div class="column">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
<div class="column">
<img src="images/cherry_blossom.jpg" alt="cherries">
</div>
</div>
<div class="row">
<div class="column text">
<h3>Favorite Picture</h3>
</div>
<div class="column text">
<h3>Favorite Picture</h3>
</div>
<div class="column text">
<h3>Favorite Picture</h3>
</div>
</div>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 20px;
}
.column img{
width: 100%;
}
.row::after {
content: "";
clear: both;
}
.text {
text-align: center;
}
<h4>Flow before the container</h4>
<div class="flower-container">
<div class="one">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<p>This is my favorite.</p>
</div>
<div class="two">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<p>This is my favorite.</p>
</div>
<div class="three">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<p>This is my favorite.</p>
</div>
</div>
<p>Flow after the container</p>
.flower-container {
position: relative;
height: 300px;
}
.flower-container div {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 20%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.flower-container .one {
left: 25%;
}
div.two {
left: 50%;
}
div.three {
left: 75%;
}
.flower-container img {
width: 100%;
}
<div class="container">
<div class="pic">
<img src="images/cherry_blossom.jpg">
<h3>This is my favorite picture</h3>
</div>
<div class="pic">
<img src="images/cherry_blossom.jpg">
<h3>This is my favorite picture</h3>
</div>
<div class="pic">
<img src="images/cherry_blossom.jpg">
<h3>This is my favorite picture</h3>
</div>
</div>
.container {
text-align: center;
}
.pic {
display: inline-block;
}
.pic img {
width: 25rem;
}
Wrapping with smaller view port
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-boots<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" async defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js" async defer>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js" async defer></script>
<div class="container">
<h2>Image Gallery</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail pic">
<a class="pic" href="images/cherry_blossom.jpg" alt="Cherries" target="_blank">
<img class="pic" src="images/cherry_blossom.jpg" alt="Cherries">
</a>
<div class="caption">
<h3>Favorite Photo </h3>
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a class="pic" href="images/cherry_blossom.jpg" alt="Cherries" target="_blank">
<img class="pic" src="images/cherry_blossom.jpg" alt="Cherries">
</a>
<div class="caption">
<h3>Favorite Photo </h3>
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a class="pic" href="images/cherry_blossom.jpg" alt="Cherries" target="_blank">
<img class="pic" src="images/cherry_blossom.jpg" alt="Cherries">
</a>
<div class="caption">
<h3>Favorite Photo </h3>
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
</div>
.pic {
width: 100%;
}
<ul class="flex-container">
<li class="flex-item">
<img src="images/cherry_blossom.jpg">
<h3 class="description">My Favorite flower.</h3>
</li>
<li class="flex-item">
<img src="images/cherry_blossom.jpg">
<h3 class="description">My Favorite flower.</h3>
</li>
<li class="flex-item">
<img src="images/cherry_blossom.jpg">
<h3 class="description">My Favorite flower.</h3>
</li>
</ul>
ul.flex-container {
list-style-type: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: flex-start;
}
ul.flex-container {
padding: 0;
}
ul.flex-container img {
height: 300px;
}
.description {
text-align: center;
}
<div class="grid-container">
<div class="grid-item">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<h3>My Favorite Picture</h3>
</div>
<div class="grid-item">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<h3>My Favorite Picture</h3>
</div>
<div class="grid-item">
<img src="images/cherry_blossom.jpg" alt="Cherries">
<h3>My Favorite Picture</h3>
</div>
</div>
.grid-container {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-columns: auto auto auto;
}
@media screen and (max-width: 992px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item img {
width: 100%;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store