Grid

The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the --grid-maxWidth in the :root .

Much like other frameworks, wrap your content in a .container to center it on the page.

Flexible grid

A simple way to build flexible responsive columns:

Add a .row container

container Add as many .col elements as you want

Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

.col

.col .col .col

<div class= "row" > <div class= "col" > .col </div> </div> <div class= "row" > <div class= "col" > .col </div> <div class= "col" > .col </div> <div class= "col" > .col </div> </div>

Sized

You can also specify the size of the columns

Add a .row container

container Add a .col-n child where n can be from 1 to 12

Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4 .

.col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1

.col-4 .col-4 .col-4

.col-12

<div class= "row" > <div class= "col-1" > .col-1 </div> <!-- repeat 11 times --> </div> <div class= "row" > <div class= "col-4" > .col-4 </div> <!-- repeat twice --> </div> <div class= "row" > <div class= "col-12" > .col-12 </div> </div>

New Responsive grids:

We now have responsive grids that work based on device width.

All columns are 100% for device width < 600px

.col and .col-N for all device sizes >= 600px

and for all device sizes >= 600px .col-N-md for >= 900px sizes

for >= 900px sizes .col-N-lg for >= 1200px sizes

.col-12.col-6-md.col-4-lg .col-6.col-3-md.col-4-lg .col-6.col-3-md.col-4-lg

.col.col-6-lg .col.col-3-lg .col.col-3-lg

<div class= "row" > <div class= "col-12 col-6-md col-4-lg" > <div class= "card is-center" > .col-12.col-6-md.col-4-lg </div> </div> <div class= "col-6 col-3-md col-4-lg" > <div class= "card is-center" > .col-6.col-3-md.col-4-lg </div> </div> <div class= "col-6 col-3-md col-4-lg" > <div class= "card is-center" > .col-6.col-3-md.col-4-lg </div> </div> </div> <div class= "row" > <div class= "col col-6-lg" > <div class= "card is-center" > .col.col-6-lg </div> </div> <div class= "col col-3-lg" > <div class= "card is-center" > .col.col-3-lg </div> </div> <div class= "col col-3-lg" > <div class= "card is-center" > .col.col-3-lg </div> </div> </div>

Mix-n-Match

You can use a combination of flexible and sized columns.

When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

.col-2 .col-2 auto .col-3

.col-10 auto

auto auto auto auto

<div class= "row" > <div class= "col-2" > .col-2 </div> <div class= "col-2" > .col-2 </div> <div class= "col" > auto </div> <div class= "col-3" > .col-3 </div> </div> <div class= "row" > <div class= "col-10" > .col-10 </div> <div class= "col" > auto </div> </div> <div class= "row" > <div class= "col" > auto </div> <div class= "col" > auto </div> <div class= "is-full-width" ></div> <div class= "col" > auto </div> <div class= "col" > auto </div> </div>

Pro tip: Create equal-width columns that span multiple rows by inserting a .is-full-width where you want the columns to break to a new line. Here .is-full-width is one of the utility class.

Reverse Direction

Add .reverse to the .row to reverse the column direction.

.col-6 .col-3 .col-3