Grids distribution

Add classes to distribute the contents of a row or column.

.row _around

1
2
3
<div class="row _around">
    <div class="col-3">
        <div class="box">1</div>
    </div>
    <div class="col-3">
        <div class="box">2</div>
    </div>
    <div class="col-3">
        <div class="box">3</div>
    </div>
</div>

.row _between

1
2
3
<div class="row _between">
    <div class="col-3">
        <div class="box">1</div>
    </div>
    <div class="col-3">
        <div class="box">2</div>
    </div>
    <div class="col-3">
        <div class="box">3</div>
    </div>
</div>

.row _center

solo
col
col
col
<div class="row _center">
    <div class="col-6">
        <div class="box">solo</div>
    </div>
</div>

<div class="row _center">
    <div class="col-4">
        <div class="box">col</div>
    </div>
    <div class="col-4">
        <div class="box">col</div>
    </div>
</div>

<div class="row _center">
    <div class="col-12">
        <div class="box">col</div>
    </div>
</div>

.row _start

solo
col
col
col
<div class="row _start">
    <div class="col-6">
        <div class="box">solo</div>
    </div>
</div>

<div class="row _start">
    <div class="col-4">
        <div class="box">col</div>
    </div>
    <div class="col-4">
        <div class="box">col</div>
    </div>
</div>

<div class="row _start">
    <div class="col-12">
        <div class="box">col</div>
    </div>
</div>

.row _end

solo
col
col
col
<div class="row _end">
    <div class="col-6">
        <div class="box">solo</div>
    </div>
</div>

<div class="row _end">
    <div class="col-4">
        <div class="box">col</div>
    </div>
    <div class="col-4">
        <div class="box">col</div>
    </div>
</div>

<div class="row _end">
    <div class="col-12">
        <div class="box">col</div>
    </div>
</div>

Responsive distribution

Different distribution for different resizes, resize the window to view it on action.

1
2
3
<div class="row _around-l _between-s">
    <div class="col-3">
        <div class="box">1</div>
    </div>
    <div class="col-3">
        <div class="box">2</div>
    </div>
    <div class="col-3">
        <div class="box">3</div>
    </div>
</div>