Wygląd

Rozdzielenie linią

Pozwala na rozdzielenie obramowaniem elementów dodanych jako flex lub grid. Aby odpowiednio dodać odstęp od linii obramowania, należy użyć klas gap-, gapx- lub gapy-.

Dodanie obramowania wymaga wcześniejszego zdefiniowania zmiennej CSS w której zapisana zostanie jego definicja.

`dividex`

Rozdzielenie elementów w ułożonych w osi X pionową linią

Klasa	Styl CSS
`dividex--<var>`	`border-left: var(--<var>);`

<div class="container py-4">
    <p>Rozdzielony grid-row</p>
    <div class="grid-row-4 gap-6 dividex--border--solid">
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
    </div>
    <br>
    <p>Rozdzielony flex</p>
    <div class="d-flex gap-6 dividex--border--solid">
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
    </div>
</div>

`dividey`

Rozdzielenie elementów w ułożonych w osi Y poziomą linią

Klasa	Styl CSS
`dividey--<var>`	`border-top: var(--<var>);`

<div class="container py-4">
    <p>Rozdzielony flex-column</p>
    <div class="d-flex flex-column gap-6 dividey--border--solid">
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
        <div class="">
            <div class="bgcolor-black/20 p-4">block</div>
        </div>
    </div>
</div>