Download

Sponsor

Route Planner and Route Optimizer

Fixed Grid


A customizable 2D fixed grid

If instead of having a minimum column width you want a fixed number of columns, wrap your grid in a fixed-grid container.

By default, this fixed grid has 2 columns:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12

HTML

<div class="fixed-grid">
  <div class="grid">
    <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>
</div>

Applying fixed grid modifiers #

You can change the column count by adding the has-$n-cols modifier class with a value ranging from 1 to 12:

Class Column Count
has-0-cols 0
has-1-cols 1
has-2-cols 2
has-3-cols 3
has-4-cols 4
has-5-cols 5
has-6-cols 6
has-7-cols 7
has-8-cols 8
has-9-cols 9
has-10-cols 10
has-11-cols 11
has-12-cols 12

Container breakpoints #

You can specify a different column count per breakpoint:

Column Count Mobile Tablet Desktop Widescreen Full HD
Until 768px From 769px From 1024px From 1216px From 1408px
1 has-1-cols-mobile has-1-cols-tablet has-1-cols-desktop has-1-cols-widescreen has-1-cols-fullhd
2 has-2-cols-mobile has-2-cols-tablet has-2-cols-desktop has-2-cols-widescreen has-2-cols-fullhd
3 has-3-cols-mobile has-3-cols-tablet has-3-cols-desktop has-3-cols-widescreen has-3-cols-fullhd
4 has-4-cols-mobile has-4-cols-tablet has-4-cols-desktop has-4-cols-widescreen has-4-cols-fullhd
5 has-5-cols-mobile has-5-cols-tablet has-5-cols-desktop has-5-cols-widescreen has-5-cols-fullhd
6 has-6-cols-mobile has-6-cols-tablet has-6-cols-desktop has-6-cols-widescreen has-6-cols-fullhd
7 has-7-cols-mobile has-7-cols-tablet has-7-cols-desktop has-7-cols-widescreen has-7-cols-fullhd
8 has-8-cols-mobile has-8-cols-tablet has-8-cols-desktop has-8-cols-widescreen has-8-cols-fullhd
9 has-9-cols-mobile has-9-cols-tablet has-9-cols-desktop has-9-cols-widescreen has-9-cols-fullhd
10 has-10-cols-mobile has-10-cols-tablet has-10-cols-desktop has-10-cols-widescreen has-10-cols-fullhd
11 has-11-cols-mobile has-11-cols-tablet has-11-cols-desktop has-11-cols-widescreen has-11-cols-fullhd
12 has-12-cols-mobile has-12-cols-tablet has-12-cols-desktop has-12-cols-widescreen has-12-cols-fullhd

Auto Count Fixed Grid #

By adding the has-auto-count modifier, the fixed grid will automatically change its count for each breakpoint:

  • 2 on mobile
  • 4 on tablet
  • 8 on desktop
  • 12 on widescreen
  • 16 on fullhd
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
Cell 13
Cell 14
Cell 15
Cell 16

HTML

<div class="fixed-grid has-auto-count">
  <div class="grid">
    <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 class="cell">Cell 13</div>
    <div class="cell">Cell 14</div>
    <div class="cell">Cell 15</div>
    <div class="cell">Cell 16</div>
  </div>
</div>

How to support Bulma

#native_company# #native_desc#
#native_cta#