Force CSS Grid to follow the order of li elements of a ul in the HTML code.

I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brands</title>
<style>
ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
</head>
<body>
<ul>
<li>Calypso</li>
<li>Casio</li>
<li>CAT</li>
<li>Esprit</li>
<li>Ferre Milano</li>
<li>Guess</li>
<li>Jaguar</li>
<li>Lotus</li>
<li>Lotus Style</li>
<li>Majorica 1890</li>
<li>Michael Fellini</li>
<li>Pierre Cardin</li>
<li>Raymond Weil Geneve</li>
<li>Reebok</li>
<li>Seiko</li>
<li>Storm</li>
<li>Trussardi</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brands</title>
<style>
ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
</head>
<body>
<ul>
<li>Calypso</li>
<li>Casio</li>
<li>CAT</li>
<li>Esprit</li>
<li>Ferre Milano</li>
<li>Guess</li>
<li>Jaguar</li>
<li>Lotus</li>
<li>Lotus Style</li>
<li>Majorica 1890</li>
<li>Michael Fellini</li>
<li>Pierre Cardin</li>
<li>Raymond Weil Geneve</li>
<li>Reebok</li>
<li>Seiko</li>
<li>Storm</li>
<li>Trussardi</li>
</ul>
</body>
</html>
By default CSS grid is splitting the list in two columns with Calypso on one column and Casio on another. What I want instead is to respect the order and start the second column with Majorica 1890.
4 Replies
b1mind
b1mindβ€’8mo ago
Use columns ?
b1mind
b1mindβ€’8mo ago
MDN Web Docs
columns - CSS: Cascading Style Sheets | MDN
The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
EIO
EIOβ€’8mo ago
@kooliris Here is one direction to go, using flex box:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 180px;

/* --Not necessary-- */
list-style: none;
outline: 2px dashed orange;
}
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 180px;

/* --Not necessary-- */
list-style: none;
outline: 2px dashed orange;
}
Want results from more Discord servers?
Add your server