CSS Grid Responsive Columns

Details

• Goal: Create Responsive Columns

EXAMPLE

HTML

<div id="wrapper">
    <div>alfa</div>
    <div>bravo</div>
    <div>charlie</div>
    <div>delta</div>
    <div>echo</div>
    <div>foxtrot</div>
    <div>golf</div>
    <div>hotel</div>
    <div>india</div>
    <div>juliett</div>
    <div>kilo</div>
    <div>lima</div>
    <div>mike</div>
    <div>november</div>
    <div>oscar</div>
    <div>papa</div>
    <div>quebec</div>
    <div>romeo</div>
    <div>sierra</div>
    <div>tango</div>
    <div>uniform</div>
    <div>victor</div>
    <div>whiskey</div>
    <div>xray</div>
    <div>yankee</div>
    <div>zulu</div>
</div>

CSS

#wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 1rem;
}

References