🌐CSS grid

positioning layouts into rows and columns

grid

By default, the display: grid works quite like display: block:

.grid {
    display: grid;
}
<body>

    <div class="grid">
        <div class="card">a</div>
        <div class="card">b</div>
        <div class="card">c</div>
        <div class="card">d</div>
    </div>

</body>

The code above would simply display four card-like containers on top of each other:

[ a ] [ b ] [ c ] [ d ]

grid-template-columns

However, if we were to introduce another property into .grid called grid-template-columns we could create an layout in a much easier fashion, without having too many class names:

.grid {
    display: grid;
    grid-template-columns: 100px 200px 100px;
}

This would simply create a grid of three columns:

  • first column: 100px wide

  • middle column: 200px wide

  • last column: 100px wide

PreviousCSS flexNextCSS breadcrumbs

Last updated