Grid

HTML

Number of columns in a row

By default, .grid is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be moved to a new row when there is not enough space in a container.

Default

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

3 columns - responsive

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

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

Auto Fill column

By default, .grid is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be moved to a new row when there is not enough space in a container.

Narrow

1
2
3
4
5
6

Regular (default)

1
2
3
4
5
6

Wide

1
2
3
4
5
6
HTML
    <div class="grid grid--columns-auto-narrow">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<div class="grid grid--columns-auto-wide">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
  

Different column width

1
2
3
4
5
6
7
8
9
HTML
    <div class="grid">
  <div class="col-6">1</div>
  <div class="col-6">2</div>
  <div class="col-4">3</div>
  <div class="col-3">4</div>
  <div class="col-5">5</div>
  <div class="col-1">6</div>
  <div class="col-2">7</div>
  <div class="col-7">8</div>
  <div class="col-2">9</div>
</div>
  

Grid options

Max container width Class prefix
Default
> 0px
100% col- and row-
Extra extra small
> 320px
100% xxs:col- and xxs:row-
Extra small
> 480px
480px xs:col- and xs:row-
Small
> 640px
580px sm:col- and sm:row-
Medium
> 768px
720px md:col- and md:row-
Large
> 991px
960px lg:col- and lg:row-
Extra large
> 1200px
1140px xl:col- and xl:row-
Extra extra large
> 1440px
1280px xxl:col- and xxl:row-