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•4mo ago

Use columns ?

b1mind•4mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

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•4mo 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;
}

ChooKing•4mo ago

Use grid-auto-flow: column https://codepen.io/chooking/pen/OJqOYjz

ChooKing

CodePen

Sequential Filling Grid

...

Gaming

Programming

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