To achieve the desired layout, you can set the width of your item to 33% and then align the content of each column to the left, center, or right using the nth-child selector.
This can be accomplished using methods such as inline-block or flex, with the example below demonstrating the use of Flexbox.
Below is a sample code snippet:
.flex {
display: flex;
flex-wrap: wrap;
}
.flex .item {
width: calc((100% / 3) - 10px);
border: 1px dotted black;
box-sizing: border-box;
margin: 5px;
display: flex;
}
.flex .item:nth-child(3n+2) div {
margin: 0 auto; /* center align every 3rd, starting from item 2 */
}
.flex .item:nth-child(3n+3) div {
margin-left: auto; /* right align every 3rd, starting from item 3 */
}
.flex .item div {
max-width: 280px;
padding: 20px;
background: lightgray;
}
<div class="flex">
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
</div>
If you need to support browsers that do not fully support Flexbox or have buggy behavior, an alternative method using inline-block and float can be used.
.parent::after {
content: '';
display: block;
clear: both;
}
.parent .item {
float: left;
width: calc((100% / 3) - 10px);
border: 1px dotted black;
box-sizing: border-box;
margin: 5px;
}
.parent .item:nth-child(3n+2) {
text-align: center; /* center align every 3rd, starting from item 2 */
}
.parent .item:nth-child(3n+3) {
text-align: right; /* right align every 3rd, starting from item 3 */
}
.parent .item div {
display: inline-block;
max-width: 280px;
padding: 20px;
background: lightgray;
text-align: left;
}
<div class="parent">
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
<div class="item">
<div>Some content that can can be a maximum of 280px wide</div>
</div>
</div>