Interview Questions of Lists-in-CSS

Q1 Provide a CSS solution for making an ordered list responsive so that it displays in a grid layout on wider screens but reverts to a standard vertical list on smaller screens.

Answer

ol {
    display: block;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

@media (min-width: 600px) {
    ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
}