Hello everyone!
I have a unique challenge that I hope someone can help me with. I have a list of links to various tests, but different sections require these links to be displayed in different ways. One section needs them spread over two columns, while another requires them to be spread over three columns. The number of tests a user takes varies, so we need the elements to distribute evenly without disrupting the overall layout if some items are missing from the list. I hope this all makes sense.
Manually arranging the items could result in uneven distribution across the columns, which is not ideal. A previous query led me to some CSS code snippets like the following:
.menu {text-align:justify;}
.menu > a {display:inline-block}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }<div class="menu">
<a href="#">0</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>I'm looking for a way to control the number of items per row without everything being displayed in a single line. Another CSS snippet I found is:
.test {
display: flex;/* We first create a flex layout context */
flex-flow: row wrap; /* Then we define the flow direction and if we allow the items to wrap */
justify-content: space-around;/* Then we define how is distributed the remaining space */
border: 1px solid #999999;
}
.test > div {
margin: 10px;
padding: 20px;
background-color: #FF0000;
}<div class="test">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
</div>This code also controls the distribution of items, but I am still looking for a way to limit the number of items per row. Any insights or feedback would be greatly appreciated.
Thank you!