Grid CSS Grid CSS is a lightweight (1.4KB) responsive layout utility optimized for mobile devices, tablets and desktops.

Responsive and Fluid

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
4
8
3
9
3
5
4
4
2
2
3
1

Multiline

4
4
4
4
4
4
4
4
4

Fixed

1
1
1
1
1
1
1
1
1
1
1
1

Not Responsive

6
6
Grid CSS is a lightweight responsive layout utility optimized for mobile devices, tablets and desktops. Up to 12 columns are supported based on fluid and fixed modes. Any combination of columns are supported as long as total is 12. For responsiveness add .ui-grid-responsive and for fixed container width add ui-grid-fixed to the container.

Source


<h3 class="first">Responsive and Fluid</h3>
<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-3">3</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-6">6</div>
        <div class="ui-grid-col-6">6</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-12">12</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-8">8</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-9">9</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-5">5</div>
        <div class="ui-grid-col-4">4</div>
    </div>
</div>

<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-2">2</div>
        <div class="ui-grid-col-3">3</div>
        <div class="ui-grid-col-1">1</div>
    </div>
</div>

<h3>Multiline</h3>
<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
    </div>
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
    </div>
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
        <div class="ui-grid-col-4">4</div>
    </div>
</div>

<h3>Fixed</h3>
<div class="ui-grid ui-grid-fixed">
    <div class="ui-grid-row">
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-1">1</div>
    </div>
</div>

<h3>Not Responsive</h3>
<div class="ui-grid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-6">6</div>
        <div class="ui-grid-col-6">6</div>
    </div>
</div>