I am experimenting with using CSS columns to showcase a variable number of columns based on the maximum width required for the content to display elegantly (without any unnecessary line breaks). Additionally, I aim to expand each element to fill the available space in the column.
Presenting what I currently have (You can view it on JSFiddle):
https://i.sstatic.net/W0hFi.png
However, this is my desired outcome (all elements having equal widths):
https://i.sstatic.net/1ZLvO.png
This is the code snippet I have attempted:
<div class="columns">
<div>
Lorem
</div>
<div>
Ipsum
</div>
<div>
Dollar
</div>
<div>
Euro
</div>
<div>
Bitcoin
</div>
</div>
* {
padding: 0;
margin: 0;
}
.columns {
columns: auto;
column-gap: 1rem;
background: #4cafff;
padding: 1rem 0;
}
.columns > div {
width: max-content;
background: #4caf50;
color: white;
font-size: 2rem;
border: 2px solid green;
margin: 1rem;
}