Grid

Forumify is packed with a flexible mobile focused responsive layout based on CSS Grids. It offers a 12 column system with numerous responsive utilities for building complex layouts across different screen sizes.

Note: In this documentation, we utilise the border class to show the grid property. By default, grids do not use border, therefore grids normally look like this:

Grid containers contain one or more grids arranged in columns and rows. We have two types of grid containers, grid and inline-grid.

grid creates a grid container with 12 equal columns:

<div class="grid">
    <div>col-1</div>
    <div>col-2</div>
    <div>col-3</div>
</div>  

inline-grid creates an inline grid container that doesn't take up the full width.

<div class="inline-grid">
    <div>col-1</div>
    <div>col-2</div>
    <div>col-3</div>
</div>  

You can specify the number of columns for your grid using grid-:

<div class="grid-3">
    <div>col-1</div>
    <div>col-2</div>
    <div>col-3</div>
</div>  

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

Available classes:

• grid-1 through grid-12
• inline-grid-1 through inline-grid-12

Control how many columns an element should span within a grid using col-:

<div class="grid">
    <div class="col-6">col-1 (6 columns)</div>
    <div class="col-3">col-2 (3 columns)</div>
    <div class="col-3">col-3 (3 columns)</div>
</div>  

<div class="grid">
    <div class="col-6">col-1 (6 columns)</div>
    <div class="col-6">col-2 (6 columns)</div>
</div>  

Available classes:

• col-1 through col-12

The grid system includes responsive variants that apply at specific breakpoints, allowing you to create different layouts for different screens.

You can create grids that change column count at different breakpoints using grid-{breakpoint}-{columns}:

<div class="grid-xs-1 grid-sm-2 grid-md-4 grid-lg-6">
    <div>col-1</div>
    <div>col-2</div>
    <div>col-3</div>
    <div>col-4</div>
    <div>col-5</div>
    <div>col-6</div>
</div> 

1 column on mobile portrait, 2 columns on mobile landscape, 4 columns on tablet, 6 columns on desktop.

Adjust how many columns an element spans at different breakpoints using col-{breakpoint}-{span}:

<div class="grid">
    <div class="col-12 col-md-6 col-lg-4">
        col-1
    </div>
</div>

Full width on mobile, half on tablet, third on desktop.

<div class="grid">
    <div class="col-12 col-md-8">
        col-1
    </div>
</div>

Full width on mobile, two-thirds on tablet and up.