Grid

Grids are used for creating a page layout. They can have multiple columns, rows and gutters in between. Ani-Design provides 4 types of grid column layouts.

2 column grid

Copy
<div class="grid grid-col2">
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
</div>

3 column grid

Copy
<div class="grid grid-col3">
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
</div>

Sidebar - Content

Meow meow mama carefully drink from water glass and then spill it everywhere and proceed to lick the puddle. Gnaw the corn cob only use one corner of the litter box yet pretend not to be evil steal raw zucchini off kitchen counter. Kitty tuxedo cats always looking dapper for scratch the box bawl under human beds kitty time. Get my claw stuck in the dog's ear trip on catnip. Meowsiers time to go zooooom. I heard this rumor where the humans are our owners, pfft, what do they know?! pet me pet me pet me pet me, bite, scratch, why are you petting me yet stand in front of the computer screen kitty time. Drink water out of the faucet.

Copy
<div class="grid grid-sidebar-content">
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>

    <div>
        <p>
            Meow meow mama carefully drink from water glass and then spill it
            everywhere and proceed to lick the puddle. Gnaw the corn cob only
            use one corner of the litter box yet pretend not to be evil steal
            raw zucchini off kitchen counter. Kitty tuxedo cats always looking
            dapper for scratch the box bawl under human beds kitty time. Get my
            claw stuck in the dog's ear trip on catnip. Meowsiers time to go
            zooooom. I heard this rumor where the humans are our owners, pfft,
            what do they know?! pet me pet me pet me pet me, bite, scratch, why
            are you petting me yet stand in front of the computer screen kitty
            time. Drink water out of the faucet.
        </p>
    </div>
</div>

Sidebar - Content - Sidebar

Sniff catnip and act crazy find a way to fit in tiny box meoooow, hiiiiiiiiii feed me now thinking about you i'm joking it's food always food yet attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently.

Copy
<div class="grid grid-sidebar-content-sidebar">
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
    <div>
        <p>
            Sniff catnip and act crazy find a way to fit in tiny box meoooow,
            hiiiiiiiiii feed me now thinking about you i'm joking it's food
            always food yet attempt to leap between furniture but woefully
            miscalibrate and bellyflop onto the floor; what's your problem? i
            meant to do that now i shall wash myself intently.
        </p>
    </div>
    <div class="image box-center">
        <img src="image.jpg" alt="A cool image" />
    </div>
</div>

< Card Image >