4 replies

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.

KP-C

Kevin Powell - Community•2y ago•

4 replies

kooliris

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.

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads