Light Css
Clone

Documentation

Grids

One Column

Flex 1
<div class="flex"> <div class="flex1">Flex 1</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
</div>

Two Equal Columns

Flex 1
Flex 1
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Three Equal Columns

Flex 1
Flex 1
Flex 1
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Four Equal Columns

Flex 1
Flex 1
Flex 1
Flex 1

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

12 Equal Columns

Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

3:4 Columns

Flex 3
Flex 4
<div class="flex"> <div class="flex3">Flex 3</div> <div class="flex4">Flex 4</div> </div> 

<div class="flex">
    <div class="flex3">Flex 3</div>
    <div class="flex4">Flex 4</div>
</div>

1:3 Columns

Flex 1
Flex 3
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex3">Flex 3</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex3">Flex 3</div>
</div>

1:4 Columns

Flex 1
Flex 4
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex4">Flex 4</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex4">Flex 4</div>
</div>

1:3:1 Columns

Flex 1
Flex 3
Flex 1
<div class="flex"> <div class="flex1">Flex 1</div> <div class="flex3">Flex 3</div> <div class="flex1">Flex 1</div> </div> 

<div class="flex">
    <div class="flex1">Flex 1</div>
    <div class="flex3">Flex 3</div>
    <div class="flex1">Flex 1</div>
</div>

Responsive Columns - 991px

Flex 1
Flex 1
<div class="flexR991"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexR991">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Responsive Unequal Columns - 768px

Flex 1
Flex 3
<div class="flexR768"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexR768">
    <div class="flex1">Flex 1</div>
    <div class="flex3">Flex 3</div>
</div>

Responsive Columns - 576px

Flex 1
Flex 1
<div class="flexR576"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexR576">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Responsive Columns - 360px

Flex 1
Flex 1
<div class="flexR360"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexR360">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Mobile Columns - 576px

Flex 1
Flex 1
<div class="flexM576"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexM576">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Mobile Columns - 768px

Flex 1
Flex 1
<div class="flexM768"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> 

<div class="flexM768">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>

Nested Columns

Flex 1

Flex 1
Flex 1

Flex 1

Flex 1
Flex 3
<div class="flexR768"> <div class="flex1"> <p>Flex 1</p> <div class="flex"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> </div> <div class="flex1"> <p>Flex 1</p> <div class="flex"> <div class="flex1">Flex 1</div> <div class="flex3">Flex 3</div> </div> </div> </div> 

<div class="flexR768">
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flex">
            <div class="flex1">Flex 1</div>
            <div class="flex1">Flex 1</div>
        </div>
    </div>
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flex">
            <div class="flex1">Flex 1</div>
            <div class="flex3">Flex 3</div>
        </div>
    </div>
</div>

Nested Responsive Columns

Flex 1

Flex 1
Flex 1

Flex 1

Flex 1
Flex 3
<div class="flexR768"> <div class="flex1"> <p>Flex 1</p> <div class="flexM768"> <div class="flex1">Flex 1</div> <div class="flex1">Flex 1</div> </div> </div> <div class="flex1"> <p>Flex 1</p> <div class="flexM576"> <div class="flex1">Flex 1</div> <div class="flex3">Flex 3</div> </div> </div> </div> 

<div class="flexR768">
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flexM768">
            <div class="flex1">Flex 1</div>
            <div class="flex1">Flex 1</div>
        </div>
    </div>
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flexM576">
            <div class="flex1">Flex 1</div>
            <div class="flex3">Flex 3</div>
        </div>
    </div>
</div>

Space Between Columns

Flex 1

Flex 1
Flex 1

Flex 1

Flex 1
Flex 3
<div class="flexR768"> <div class="flex1"> <p>Flex 1</p> <div class="flexR768"> <div class="flex1">Flex 1</div> <div class="flexGap1"></div> <div class="flex1">Flex 1</div> </div> </div> <div class="flexGap2"></div> <div class="flex1"> <p>Flex 1</p> <div class="flexR576"> <div class="flex1">Flex 1</div> <div class="flexGap1"></div> <div class="flex3">Flex 3</div> </div> </div> </div> 

<div class="flexR768">
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flexR768">
            <div class="flex1">Flex 1</div>
            <div class="flexGap1"></div>
            <div class="flex1">Flex 1</div>
        </div>
    </div>
    <div class="flexGap2"></div>
    <div class="flex1">
        <p>Flex 1</p>
        <div class="flexR576">
            <div class="flex1">Flex 1</div>
            <div class="flexGap1"></div>
            <div class="flex3">Flex 3</div>
        </div>
    </div>
</div>
Previous Next