How to display <li>
elements in columns, with 4 elements in each column?
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Displayed like this:
1 5
2
3
4
UPD. Number of 'li' elements is unknown
How to display <li>
elements in columns, with 4 elements in each column?
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Displayed like this:
1 5
2
3
4
UPD. Number of 'li' elements is unknown
display:grid
and :nth-child(n
) could help latest browsers :
See : https://css-tricks.com/snippets/css/complete-guide-grid/ about grid CSS.
ul {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));/*set you own values*/
/*demo purpose*/
counter-reset: lis;
}
li {
display: block;
counter-increment: lis;
}
li:before {
content: counter(lis);
/* end demo purpose */
}
li:nth-child(4n - 1) {
grid-row: 3;
color: blue;
}
li:nth-child(4n) {
grid-row: 4;
color: purple;
}
li:nth-child(4n - 2) {
grid-row: 2;
color: green;
}
li:nth-child(4n - 3) {
grid-row: 1;
color: red;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Try using a flexbox.
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
height: 400px;
flex-wrap: wrap;
}
.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
You can try this:
ul {
display: inline;
padding-left: 0;
}
li {
display: inline-block;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>