Menu
Usage

Use Beegrid options and classes to laying out your application, including responsive media query and many predefined layouts.

Containers

Containers are the basic layout element in Beegrid. You can choose between two types of container.

<div class="grid-container">
  <!-- Your grid items here -->
</div>
<div class="grid-container-fluid">
  <!-- Your grid items here -->
</div>

How grid works

Beeui grid use a main container, as described before, and its child component represent the columns of the grid system.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container-fluid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

The above example define a grid with twelve equal with columns with a predefined responsive behavior. Each column has a padding (called gap) for controlling the space between them. Here’s how it work:

Grid breakpoints

See how aspects of the BeeGrid grid system work across multiple devices.

Extra small
≥0px 		Small
≥480px 		Medium
≥960px 		Large
≥1280px 		Extra large
≥1440px
Max container width none 640px 1024px 1280px 1440px
Class prefix .cols-* .cols-sm-* .cols-md-* .cols-lg-* .cols-xl-*
# of columns 12
Grid gap 12px 15px 15px 15px 15px

Layout grid

You can specify columns number class on the container. For example if you want a grid with six columns for each brekpoint you can specify the class .col-{i}, where i is a number between 1 and 12.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container-fluid cols-6">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

As you can see, you don’t need to specify a “row” container and a specific class on each column item. The container define the number of columns on each container row.

Colspan

You can specify, on a column item, how many grid columns the item span. Here come an example:

1 to 3
4
5
6
7
8
9 to 10
11
12
13
14
15
16 to 18
<div class="grid-container-fluid cols-6">
  <div class="grid-item colspan-3">1 to 3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item colspan-2">9 to 10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item colspan-3">16 to 18</div>
</div>

Responsive classes

Beeui includes five tiers predefined classes for building complex responsive grids. You can define the behavior of your grids on extra small, small, medium, large and extra large devices as you see fit.

Specify all breakpoints

If you want that your grid have a different behavior for each device size, you can specify the number of columns on the container usign the col-{bp}-{i} classes, where bp is represent the breakpoint and i the number of columns.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container-fluid cols-1 cols-sm-2 cols-md-3 cols-lg-6 cols-xl-12">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

In this example we decide to have a different behaviour for each screen size. For the extra large screen we decide to have a twelve columns system, on large six, on medium three on small 2 and, finally on extra small devices a stacked columns grid.

Rows and columns

You can define the number of rows and columns that a grid item must occupy at certain device size. For example, if we take a look at previous example, we can decide that the grid item 1 can occupy two columns and two rows on medium screen size.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container-fluid cols-1 cols-sm-2 cols-md-3 cols-lg-6 cols-xl-12">
  <div class="grid-item row-md-start-1-end-2 col-lg-start-1-end-2">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

Custom Grid

If yout want to build a custom grid you can use .custom-grid class and add inline CSS variables --cols-number and --gap.

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid custom-grid" style="--cols-number: 5; --gap: 5px">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
</div>

Alignments

You can use alignment utility classes to align your grid item.

Horizontal

You can specify an horizontal alignment with .justify-self-* classes on an grid item.

.justify-self-start
.justify-self-center
.justify-self-end
.justify-self-center
.justify-self-center
.justify-self-start
.justify-self-stretch
.justify-self-end
<div class="grid-container-fluid cols-3">
  <div class="grid-item justify-self-start">.justify-self-start</div>
  <div class="grid-item justify-self-center">.justify-self-center</div>
  <div class="grid-item justify-self-end">.justify-self-end</div>
</div>
<div class="grid-container-fluid cols-2">
  <div class="grid-item justify-self-center">.justify-self-center</div>
  <div class="grid-item justify-self-center">.justify-self-center</div>
</div>
<div class="grid-container-fluid cols-3">
  <div class="grid-item justify-self-start">.justify-self-start</div>
  <div class="grid-item justify-self-stretch">.justify-self-stretch</div>
  <div class="grid-item justify-self-end">.justify-self-end</div>
</div>

Vertical

As you can align horizontally, you can align an item vertically with .align-self-* classes. As in the following example.

.align-self-start
.align-self-end
.align-self-end
<div class="grid-container-fluid cols-3">
  <div class="grid-item align-self-start">.align-self-start</div>
  <div class="grid-item align-self-end">.align-self-end</div>
  <div class="grid-item align-self-center">.align-self-end</div>
</div>

Nesting

To nest your content you can specify a .grid-container, with a specific numbers of cols and, in a specific grid item, you can declare another .grid-container.

One of Two
Two of Two
<div class="grid-container-fluid cols-1">
  <div class="grid-item no-padding align-self-center">
    <div class="grid-container-fluid cols-2">
      <div class="grid-item">One of Two</div>
      <div class="grid-item">Two of Two</div>
    </div>
  </div>
</div>