<div class="container">
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<h2>Etiam ultricies nisi</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(100% / 3 - 60px);
background: #fdd;
padding: 20px;
margin: 10px;
}
h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
p {
line-height: 1.4;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.