Explaining what I'm attempting can be a bit tricky, but I'll do my best.
- I have X number of categories that I need to organize.
- Each category needs to be enclosed in a box with a grey border.
- I want the category boxes to be displayed "inline-block" from left to right.
- The number of boxes displayed across the page will vary based on the user's screen size.
- The boxes on the left should align with the left side of the container, and those on the right should align with the right side.
Visual representation:
.container {
width: 100%;
}
.category {
width: 100px;
display: inline-block;
border: 1px solid grey;
}<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>If I were to change:
.container {
column-count:4;
}
This gives me the desired effect, but the categories are not displayed in order across the screen. They show vertically instead of horizontally.