James Bailey James Bailey - 7 months ago 13
Javascript Question

List with responsive shifts

I have an un-ordered list that looks like this on a full size page:

Item 1
Item 2
Item 3
Item 4
Item 5 <some content here>
Item 6
Item 7
Item 8
Item 9


But I want it to go to:

Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9

<some content>


at 100% width of a phone.

I have the list and "other content" in divs doing what I need, but in regards to the list, should I use tables, or is there CSS that I can use with an un-ordered list?

Answer

try this code

       ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 300px;
            width: 100%;
        }

        li {
            flex: 1;
            min-height: 100px;
        }

    </style>
</head>

<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>

</body>

adjust the height of ul and li to fit your design needs

Comments