grid by pixltd.dev v1.0.0

Minimalist grid system for html/css

grid css
design css (you don't need this)

Available Classes

Containers

.box: Main container for the grid system.

Rows

.row: Standard row for layout, does not occupy full height.
.row-full: Row that takes up the remaining vertical space.

Columns

.col: Flexible column that adjusts based on content.
.col-min: Minimal column that only takes as much width as its content requires.

Alignment Classes

.ar-center-h: Center content horizontally in a row.
.ar-top: Align content to the top in a row.
.ar-bot: Align content to the bottom in a row.
.ac-center-v: Center content vertically in a column.
.ac-left: Align content to the left in a column.
.ac-right: Align content to the right in a column.
.ar-center-vh: Center content both vertically and horizontally in a row.
.ac-center-vh: Center content both vertically and horizontally in a column.

Spacing Utilities

.sv-8, .sv-16, .sv-32, .sv-64: Vertical spacing utilities.
.sh-8, .sh-16, .sh-32, .sh-64: Horizontal spacing utilities.

Padding Utilities

.p-8, .p-16, .p-32, .p-64: Padding utilities.

Margin Utilities

.m-8, .m-16, .m-32, .m-64: Margin utilities.

Example Usage

Here’s an example of a grid layout using the available classes:

<div class="box">
    <div class="row-full ar-center-h">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
    </div>
    <div class="row ar-top">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
    </div>
    <div class="row-full ar-center-h">
        <div class="col-min">Minimal Column</div>
    </div>
</div>

Try it!

In the worst html IDE ever!