INTRODUCTION

DRIM GRID UI lets you divide your content horizonatlly and vertically into parts, which helps organize the content more eficiently and visually.
DRIM GRID UI by default uses 12 cell system, which means you can divide your content horizontally into up to 12 parts. You can choose to divide into equal or unequal parts.

Click on "</>" icon to see the HTML code

It's quite easy, for example:

CELL 1
CELL 2
                
    <div class="grid">
        <div class="cell six"> CELL 1 </div>
        <div class="cell six"> CELL 2 </div>
    </div>
                
            

Inside the grid (".grid") element there are 2 "div" elements with class="cell six" where
- "cell" means it is a grid cell/column/item
- "six" is the number of parts needed (six out of twelve).

Another exmple:

                
    <div class="grid">
        <div class="cell four"> CELL 1 </div>
        <div class="cell four"> CELL 2 </div>
        <div class="cell four"> CELL 3 </div>
    </div>
                
            
CELL 1
CELL 2
CELL 3

DRIM GRID UI: GRID

</>
ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
SEVEN
FIVE
EIGHT
FOUR
NINE
THREE
TEN
TWO
ELEVEN
ONE
TWELVE
                    
    <div class="grid">
        <div class="cell one">    ONE     </div>
        <div class="cell eleven"> ELEVEN  </div>
    </div>
        <!-- 1 + 11 = 12 -->

    <div class="grid">
        <div class="cell two">    TWO     </div>
        <div class="cell ten">    TEN     </div>
    </div>
        <!-- 2 + 10 = 12 -->

    <div class="grid">
        <div class="cell three">  THREE   </div>
        <div class="cell nine">   NINE    </div>
    </div>
        <!-- 3 + 9 = 12 -->

    <div class="grid">
        <div class="cell four">   FOUR    </div>
        <div class="cell eight">  EIGH    </div>
    </div>
        <!-- 4 + 8 = 12 -->

    <div class="grid">
        <div class="cell five">   FIVE    </div>
        <div class="cell seven">  SEVEN   </div>
    </div>
        <!-- 5 + 7 = 12 -->

    <div class="grid">
        <div class="cell six">    SIX     </div>
        <div class="cell six">    SIX     </div>
    </div>
        <!-- 6 + 6 = 12 -->

    <div class="grid">
        <div class="cell seven">  SEVEN   </div>
        <div class="cell five">   FIVE    </div>
    </div>
        <!-- 7 + 5 = 12 -->

    <div class="grid">
        <div class="cell eight">  EIGHT   </div>
        <div class="cell four">   FOUR    </div>
    </div>
        <!-- 8 + 4 = 12 -->

    <div class="grid">
        <div class="cell nine">   NINE    </div>
        <div class="cell three">  THREE   </div>
    </div>
        <!-- 9 + 3 = 12 -->

    <div class="grid">
        <div class="cell ten">    TEN     </div>
        <div class="cell two">    TWO     </div>
    </div>
        <!-- 10 + 2 = 12 -->

    <div class="grid">
        <div class="cell eleven"> ELEVEN  </div>
        <div class="cell one">    ONE     </div>
    </div>
        <!-- 11 + 1 = 12 -->

    <div class="grid">
        <div class="cell twelve"> TWELVE  </div>
    </div>
        <!-- 12 = 12 -->
                    
                

You can divide the content into more than 2 parts, up until 12.
You can have any combination of cells and you'll get a complete line as long as the comulms' widths sum up to 12.

</>

1 + 2 + 3 + 6 = 12

ONE
TWO
THREE
SIX
                    
    <div class="grid">
        <div class="cell one">    ONE   </div>
        <div class="cell two">    TWO   </div>
        <div class="cell three">  THREE </div>
        <div class="cell six">    SIX   </div>
    </div>
                    
                
</>

2 + 2 + 8 = 12

TWO
TWO
EIGHT
                    
    <div class="grid">
        <div class="cell two">    TWO   </div>
        <div class="cell two">    TWO   </div>
        <div class="cell right">  EIGHT </div>
    </div>
                    
                
</>

2 + 4 + 4 + 2 = 12

TWO
FOUR
FOUR
TWO
                    
    <div class="grid">
        <div class="cell two">  TWO   </div>
        <div class="cell four"> FOUR  </div>
        <div class="cell four"> FOUR  </div>
        <div class="cell two">  TWO   </div>
    </div>
                    
                
</>

1 + 10 + 1 = 12

ONE
TEN
ONE
                    
    <div class="grid">
        <div class="cell one"> ONE </div>
        <div class="cell ten"> TEN </div>
        <div class="cell one"> ONE </div>
    </div>
                    
                
</>

1 + 4 + 2 + 4 + 1 = 12

ONE
FOUR
TWO
FOUR
ONE
                    
    <div class="grid">
        <div class="cell one">  ONE   </div>
        <div class="cell four"> FOUR  </div>
        <div class="cell two">  TWO   </div>
        <div class="cell four"> FOUR  </div>
        <div class="cell one">  ONE   </div>
    </div>
                    
                
</>

6 x 1 + 6 = 12

ONE
ONE
ONE
ONE
ONE
ONE
SIX
                    
    <div class="grid">
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell six"> SIX </div>
    </div>
                    
                
</>

12 x 1 = 12

ONE
ONE
ONE
ONE
ONE
ONE
ONE
ONE
ONE
ONE
ONE
ONE
                    
    <div class="grid">
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
        <div class="cell one"> ONE </div>
    </div>
                    
                

The cells' widths do not have to sum to up 12, they can be more or less.
- if the sum of cell widths is less than 12, the corresponding number of "missing" parts will be left empty.
- if the sum of cell widths is greater than 12, the cells will continue "from a new line", will be displayed below.

</>

4 x 2 = 8 < 12, the last 4 (12 - 8 = 4) parts are left empty.

TWO
TWO
TWO
TWO
                    
    <div class="grid">
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
    </div>
                    
                
</>

4 x 2 = 16 > 12, the last 4 (16 - 12 = 4) parts are in a new line.

TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
                    
    <div class="grid">
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
    </div>
                    
                
</>

12 x 2 = 24 > 12, 24 parts make 2 complete lines.

TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
TWO
                    
    <div class="grid">
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
    </div>
                    
                
</>

Again 2 complete lines: 6 x 2 + 12 = 24.

TWO
TWO
TWO
TWO
TWO
TWO
TWELVE
                    
    <div class="grid">
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell two"> TWO </div>
        <div class="cell rwelve"> TWELVE </div>
    </div>
                    
                
</>

The example at the begining was made using 12 grid elements each one having 2 cells. The same can be achived using only one grid element:

ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
SEVEN
FIVE
EIGHT
FOUR
NINE
THREE
TEN
TWO
ELEVEN
ONE
TWELVE
                    
    <div class="grid">
        <div class="cell one">    ONE     </div>
        <div class="cell eleven"> ELEVEN  </div>

        <div class="cell two">    TWO     </div>
        <div class="cell ten">    TEN     </div>

        <div class="cell three">  THREE   </div>
        <div class="cell nine">   NINE    </div>

        <div class="cell four">   FOUR    </div>
        <div class="cell eight">  EIGH    </div>

        <div class="cell five">   FIVE    </div>
        <div class="cell seven">  SEVEN   </div>

        <div class="cell six">    SIX     </div>
        <div class="cell six">    SIX     </div>

        <div class="cell seven">  SEVEN   </div>
        <div class="cell five">   FIVE    </div>

        <div class="cell eight">  EIGHT   </div>
        <div class="cell four">   FOUR    </div>

        <div class="cell nine">   NINE    </div>
        <div class="cell three">  THREE   </div>

        <div class="cell ten">    TEN     </div>
        <div class="cell two">    TWO     </div>

        <div class="cell eleven"> ELEVEN  </div>
        <div class="cell one">    ONE     </div>

        <div class="cell twelve"> TWELVE  </div>
    </div>
                    
                
</>

A simple webpage structure may look like this:

HEADER
CONTENT
SIDEBAR
FOOTER
                    
    <div class="grid has-cell-border has-text-center">
        <div class="cell twelve"> HEADER </div>
        <div class="cell nine"> CONTENT </div>
        <div class="cell three"> SIDEBAR </div>
        <div class="cell twelve"> FOOTER </div>
    </div>
                    
                

You can divide your content into several parts but fill content only in some of them, e.g. leave them empty.

</>

3 x 4 = 12. The first cell is left empty.

CONTENT
CONTENT
                    
    <div class="grid">
        <div class="cell four"> </div>
        <div class="cell four"> CONTENT </div>
        <div class="cell four"> CONTENT </div>
    </div>
                    
                
</>

3 x 4 = 12. The last cell is left empty.

CONTENT
CONTENT
                    
    <div class="grid">
        <div class="cell four"> CONTENT </div>
        <div class="cell four"> CONTENT </div>
        <div class="cell four"> </div>
    </div>
                    
                
</>

4 x 3 = 12. 2 cells in th middle are left empty.

CONTENT
CONTENT
                    
    <div class="grid">
        <div class="cell three"> CONTENT </div>
        <div class="cell three"> </div>
        <div class="cell three"> </div>
        <div class="cell three"> CONTENT </div>
    </div>
                    
                
</>

The same example without borders and with more content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    
    <div class="grid">
        <div class="cell three"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna </div>
        <div class="cell three"> </div>
        <div class="cell three"> </div>
        <div class="cell three"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna </div>
    </div>
                    
                

DRIM GRID UI: ROW

In case you want to simply divide your content into eqaul parts, you better use rows .row

</>

1 cell row

CELL 1
                    
                    <div class="row one-cell">
                        <div class="cell"> CELL 1 </div>
                    </div>
                    
                
</>

2 cell row

CELL 1
CELL 2
                    
    <div class="row two-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
    </div>
                    
                
</>

3 cell row

CELL 1
CELL 2
CELL 3
                    
                    <div class="row three-cells">
                        <div class="cell"> CELL 1 </div>
                        <div class="cell"> CELL 2 </div>
                        <div class="cell"> CELL 3 </div>
                    </div>
                    
                
</>

4 cell row

CELL 1
CELL 2
CELL 3
CELL 4
                    
    <div class="row four-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
    </div>
                    
                
</>

5 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
                    
    <div class="row five-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
    </div>
                    
                
</>

6 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
                    
    <div class="row six-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
    </div>
                    
                
</>

7 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
                    
    <div class="row seven-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
    </div>
                    
                
</>

8 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
CELL 8
                    
    <div class="row eight-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
        <div class="cell"> CELL 8 </div>
    </div>
                    
                
</>

9 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
CELL 8
CELL 9
                    
    <div class="row nine-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
        <div class="cell"> CELL 8 </div>
        <div class="cell"> CELL 9 </div>
    </div>
                    
                
</>

10 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
CELL 8
CELL 9
CELL 10
                    
    <div class="row ten-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
        <div class="cell"> CELL 8 </div>
        <div class="cell"> CELL 9 </div>
        <div class="cell"> CELL 10 </div>
    </div>
                    
                
</>

11 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
CELL 8
CELL 9
CELL 10
CELL 11
                    
    <div class="row eleven-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
        <div class="cell"> CELL 8 </div>
        <div class="cell"> CELL 9 </div>
        <div class="cell"> CELL 10 </div>
        <div class="cell"> CELL 11 </div>
    </div>
                    
                
</>

12 cell row

CELL 1
CELL 2
CELL 3
CELL 4
CELL 5
CELL 6
CELL 7
CELL 8
CELL 9
CELL 10
CELL 11
CELL 12
                    
    <div class="row twelve-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
        <div class="cell"> CELL 4 </div>
        <div class="cell"> CELL 5 </div>
        <div class="cell"> CELL 6 </div>
        <div class="cell"> CELL 7 </div>
        <div class="cell"> CELL 8 </div>
        <div class="cell"> CELL 9 </div>
        <div class="cell"> CELL 10 </div>
        <div class="cell"> CELL 11 </div>
        <div class="cell"> CELL 12 </div>
    </div>
                    
                

DRIM GRID UI: PROPERTIES

GRID GAP

There are 5 built-in classes for grid gaps (aka "gutter").

</>

Default

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-gap">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>

    * By default the grids have a gap of 1em, so you can skip `has-gap` class. It is usefull to clear the gaps for nested grids.
                    
                
</>

Small Gap

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-gap-small">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Medium Gap

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-gap-medium">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Big Gap

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-gap-big">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Custom Gap

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-gap-custom">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

No Gap

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells no-gap">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

GRID HORIZONTAL ALIGNMENT

You can justify the cell content itself by using 4 builin classes:

</>

Default: Stretch

CELL 1 [.is-justified-stretch]
CELL 2 [.is-justified-stretch]
CELL 3 [.is-justified-stretch]
                    
    <div class="row three-cells has-cell-border has-padding is-justified-stretch">
        <div class="cell"> CELL 1 [.is-justified-stretch] </div>
        <div class="cell"> CELL 2 [.is-justified-stretch] </div>
        <div class="cell"> CELL 3 [.is-justified-stretch] </div>
    </div>
                    
                
</>

Left

CELL 1 [.is-justified-left]
CELL 2 [.is-justified-left]
CELL 3 [.is-justified-left]
                    
    <div class="row three-cells has-cell-border has-padding is-justified-left">
        <div class="cell"> CELL 1 [.is-justified-left] </div>
        <div class="cell"> CELL 2 [.is-justified-left] </div>
        <div class="cell"> CELL 3 [.is-justified-left] </div>
    </div>
                    
                
</>

Center

CELL 1 [.is-justified-center]
CELL 2 [.is-justified-center]
CELL 3 [.is-justified-center]
                    
    <div class="row three-cells has-cell-border has-padding is-justified-center">
        <div class="cell"> CELL 1 [.is-justified-center] </div>
        <div class="cell"> CELL 2 [.is-justified-center] </div>
        <div class="cell"> CELL 3 [.is-justified-center] </div>
    </div>
                    
                
</>

Right

CELL 1 [.is-justified-right]
CELL 2 [.is-justified-right]
CELL 3 [.is-justified-right]
                    
    <div class="row three-cells has-cell-border has-padding is-justified-right">
        <div class="cell"> CELL 1 [.is-justified-right] </div>
        <div class="cell"> CELL 2 [.is-justified-right] </div>
        <div class="cell"> CELL 3 [.is-justified-right] </div>
    </div>
                    
                

* The horizontal alignment classes can be assigned to the grid element which will affect all of its cells, or to individual cells.


CELL VERTICAL ALIGNMENT

You can also align cells vertically.

</>

Default: Stretch

CELL 1 [.is-aligned-stretch]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit.
CELL 2 [.is-aligned-stretch]
CELL 3 [.is-aligned-stretch]
                    
    <div class="row three-cells has-cell-border has-padding is-aligned-stretch">
        <div class="cell"> CELL 1 [.is-aligned-stretch] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit. </div>
        <div class="cell"> CELL 2 [.is-aligned-stretch] </div>
        <div class="cell"> CELL 3 [.is-aligned-stretch] </div>
    </div>
                    
                
</>

Top

CELL 1 [.is-aligned-top]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit.
CELL 2 [.is-aligned-top]
CELL 3 [.is-aligned-top]
                    
    <div class="row three-cells has-cell-border has-padding is-aligned-top">
        <div class="cell"> CELL 1 [.is-aligned-top] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit. </div>
        <div class="cell"> CELL 2 [.is-aligned-top] </div>
        <div class="cell"> CELL 3 [.is-aligned-top] </div>
    </div>
                    
                
</>

Center

CELL 1 [.is-aligned-center]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit.
CELL 2 [.is-aligned-center]
CELL 3 [.is-aligned-center]
                    
    <div class="row three-cells has-cell-border has-padding is-aligned-center">
        <div class="cell"> CELL 1 [.is-aligned-center] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit. </div>
        <div class="cell"> CELL 2 [.is-aligned-center] </div>
        <div class="cell"> CELL 3 [.is-aligned-center] </div>
    </div>
                    
                
</>

Bottom

CELL 1 [.is-aligned-bottom]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit.
CELL 2 [.is-aligned-bottom]
CELL 3 [.is-aligned-bottom]
                    
    <div class="row three-cells has-cell-border has-padding is-aligned-bottom">
        <div class="cell"> CELL 1 [.is-aligned-bottom] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit. </div>
        <div class="cell"> CELL 2 [.is-aligned-bottom] </div>
        <div class="cell"> CELL 3 [.is-aligned-bottom] </div>
    </div>
                    
                

* The vertical alignment classes can be assigned to the grid element which will affect all of its cells, or to individual cells.

Combined cell alignments

You can combine the cell alignments. For example:

</>
CELL 1 [.is-aligned-bottom .is-justified-right]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla elit. Duis et fringilla elit.
CELL 2 [.is-aligned-bottom .is-justified-right]
CELL 3 [.is-aligned-bottom .is-justified-right]
                    
    <div class="row three-cells has-cell-border has-padding is-aligned-bottom">
        <div class="cell"> CELL 1 [.is-aligned-bottom .is-justified-right] Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        <div class="cell"> CELL 2 [.is-aligned-bottom .is-justified-right] </div>
        <div class="cell"> CELL 3 [.is-aligned-bottom .is-justified-right] </div>
    </div>
                    
                

DRIM UI GRID: STYLING

PADDING

There are built-in classes for padding.

</>

Default: No Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Small (0.5em) Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-padding-small">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Medium (1.5em) Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-padding-medium">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Big (2em) Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-padding-big">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Custom (0.25em) Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-padding-custom">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

You can use these classes to add padding to .grid, .row and .cell elements

Instead of using the same .has-padding-SIZE class for all the cells, you can also assign padding to all the cells of a grid by adding .has-cell-padding-SIZE class to the parnet grid element. For example:

</>

Big (2em) CELL Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-padding-big">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

The class names for cell padding have the same structure: .has-cell-padding-SIZE.

</>

Big Grid Padding + Big Cell Padding

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-padding-big">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

MARGIN

There are built-in classes for margin.

By default .grid and .row elements have 1em bottom margin, which can be overwritten by using this classes.

</>

Default : Margin [0 0 1em 0]

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

.has-margin-small : 0.5em

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-margin-small">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

.has-margin - 1em

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-margin">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

.has-margin-medium : 1.5em

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-margin-medium">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

.has-margin-big : 2em

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-margin-big">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

.has-margin-custom : 0.25em

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-margin-custom">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

BORDERS

By default, the grids and cells do not have any borders, but you can add a class .has-border or .has-cell-border to the grid and/or cell elements. Check out the example below:

</>

No Border

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Cell Borders

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-border">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Grid Borders

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-border">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Grid Borders & Cell Borders & Border Colors

CELL 1 [.has-border-pink]
CELL 2 [.no-border]
CELL 3 [.has-border-teal]
                    
    <div class="row three-cells has-padding-small has-cell-border has-border">
        <div class="cell has-border-pink"> CELL 1 [.has-border-pink] </div>
        <div class="cell no-border">       CELL 2 [.no-border] </div>
        <div class="cell has-border-teal"> CELL 3 [.has-border-teal] </div>
    </div>
                    
                

Add .has-border-COLOR class to grid or cell elements to change the border colors.


TEXT ALIGNMENT

Easily align content in the grid/cell by using the below classes:

</>

Default: Left

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-border">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Center

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-border has-text-center">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

Right

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-cell-border has-text-right">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                

COLORFUL GRID

The grid elements don't have to black and white, there are predefined classes for some color names.

red
pink
orange
yellow
purple
green
lightgreen
lime
teal
blue
navi
steelblue
grey
silver
white
black
primary
secondary
info
warning
danger
</>

You can add background color to the entire grid or individual cells by just adding .has-bg-COLORNAME class to the grid element.

CELL 1
CELL 2
CELL 3
                    
    <div class="row three-cells has-text-center has-bg-red">
        <div class="cell"> CELL 1 </div>
        <div class="cell"> CELL 2 </div>
        <div class="cell"> CELL 3 </div>
    </div>
                    
                
</>

To change the text color, just add .has-text-COLORNAME class to the cell element.

.has-bg-silver .has-text-teal
.has-bg-lime .has-text-maroon
.has-bg-black .has-text-white
                    
    <div class="row three-cells has-text-center">
        <div class="cell has-bg-silver has-text-teal"> .has-bg-silver .has-text-teal </div>
        <div class="cell has-bg-lime has-text-maroon"> has-bg-lime .has-text-maroon </div>
        <div class="cell has-bg-black has-text-white"> .has-bg-black .has-text-white </div>
    </div>
                    
                

NESTED GRIDS

Nested grids are supported. Nest as many grids as you want, just note that child grid elements inherit the properties of their parents if you don't specify them.

</>

Example:

1st level grid, 3 cells

1st level grid, 9 cells

2nd level grid, 1/2 row

2nd level grid, 1/2 row

3rd level, 1/2 row

3rd level, 1/2 row

                    
    <div class="grid has-padding-small has-cell-padding-small has-bg-red">
        <div class="cell three">
            1st level grid, 3 cells
        </div>
        <div class="cell nine">
            <p>1st level grid, 9 cells</p>

            <div class="row two-cells has-bg-teal has-cell-padding-small">
                <div class="cell">
                    <p>2nd level grid, 1/2 row</p>
                </div>
                <div class="cell">
                    <p>2nd level grid, 1/2 row</p>

                    <div class="row two-cells has-cell-padding-small has-bg-warning">
                        <div class="cell">
                            <p>3rd level, 1/2 row</p>
                        </div>
                        <div class="cell">
                            <p>3rd level, 1/2 row</p>
                        </div>
                    </div>
                </div>            
            </div>
        </div>
    </div>
                    
                
</>

A cell itself can be a grid element.

a cell itself can be a grid:
class="cell eight row two-cells"
                    
    <div class="grid has-padding has-cell-padding has-bg-green">
        <div class="cell four has-bg-lime">
            a cell itself can be a grid:
            <code>class="cell eight row two-cells"</code>
        </div>
        <div class="cell eight row two-cells has-cell-padding no-margin has-bg-lime">
            <div class="cell has-bg-orange">
            </div>
            <div class="cell has-bg-orange">
            </div>
        </div>
    </div>
                    
                

© Copyright 2017 | DR!M.IO