## Grids

### Flex Row

Item 1
Item 2
Item 3
HTML

    <div class="flex--row" style="gap: 1rem">
                <div class="demo-box">Item 1</div>
                <div class="demo-box">Item 2</div>
                <div class="demo-box">Item 3</div>
            </div>

### Flex Column

Item A
Item B
Item C
HTML

    <div class="flex--col" style="gap: 1rem">
                <div class="demo-box">Item A</div>
                <div class="demo-box">Item B</div>
                <div class="demo-box">Item C</div>
            </div>

### Flex Wrap

Box 1
Box 2
Box 3
Box 4
HTML

    <div class="flex--row flex--wrap" style="gap: 1rem">
                <div class="demo-box" style="width: 30%">Box 1</div>
                <div class="demo-box" style="width: 30%">Box 2</div>
                <div class="demo-box" style="width: 30%">Box 3</div>
                <div class="demo-box" style="width: 30%">Box 4</div>
            </div>

### Align Self

start
center
end
stretch
HTML

    <div
                class="flex--row"
                style="height: 120px; align-items: stretch; gap: 1rem"
            >
                <div class="demo-box align_self--start">start</div>
                <div class="demo-box align_self--center">center</div>
                <div class="demo-box align_self--end">end</div>
                <div class="demo-box align_self--stretch">stretch</div>
            </div>

### Flex Row Reverse

First
Second
Third
HTML

    <div class="flex--row--reverse" style="gap: 1rem">
                <div class="demo-box">First</div>
                <div class="demo-box">Second</div>
                <div class="demo-box">Third</div>
            </div>

### Flex Column Reverse

Bottom
Middle
Top
HTML

    <div class="flex--col--reverse" style="gap: 1rem">
                <div class="demo-box">Bottom</div>
                <div class="demo-box">Middle</div>
                <div class="demo-box">Top</div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!