Grid CSS Grid CSS is a lightweight (1.4KB) responsive layout utility optimized for mobile devices, tablets and desktops. Grid CSS is user internally in PrimeNG components and can be used as standalone as well.

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

Getting Started

Grid CSS is based on a 12 column layout, for example a 3 column layout can be defined as;


<div class="ui-grid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">Col1</div>
        <div class="ui-grid-col-4">Col2</div>
        <div class="ui-grid-col-4">Col3</div>
    </div>
</div>

Custom Layout

As long as the sum of columns are 12, various combinations are supported.


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

Multi Line

Multiple rows are enabled using more than one .ui-grid-row elements.


<div class="ui-grid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">Col1</div>
        <div class="ui-grid-col-4">Col2</div>
        <div class="ui-grid-col-4">Col3</div>
    </div>
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">Col1</div>
        <div class="ui-grid-col-4">Col2</div>
        <div class="ui-grid-col-4">Col3</div>
    </div>
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">Col1</div>
        <div class="ui-grid-col-4">Col2</div>
        <div class="ui-grid-col-4">Col3</div>
    </div>
</div>

Responsive

Adding .ui-grid-responsive to the container makes the content responsive to screen sizes.


<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>

Fixed

.ui-grid-fixed enables fixed width for the content.


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


<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>