Cutestrap

Grid

A simple grid with automatic columns

Column

<div class="grid [modifier class]">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.-medium start at 45rem

Column

.-large start at 80rem

Column

5-1 Columns

Manually set column widths (Note: the syntax is passing a custom property with a number value. KSS Docs only support modified classes, so ignore the term [modifier class] and the dot before the number in the examples below).

Column

<div class="grid" style="--columns: [modifier class]">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.2 Two columns

Column

.3 Three columns

Column

.4 Four columns

Column