static/scss/bootstrap-4.0.0-alpha.6/docs/layout/grid.md

   1 ---
   2 layout: docs
   3 title: Grid system
   4 description: Documentation and examples for using Bootstrap's responsive flexbox grid system.
   5 group: layout
   6 ---
   7
   8 Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes.
   9
  10 ## Contents
  11
  12 * Will be replaced with the ToC, excluding the "Contents" header
  13 {:toc}
  14
  15 ## How it works
  16
  17 Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
  18
  19 <div class="bd-example bd-example-row">
  20 <div class="container">
  21   <div class="row">
  22     <div class="col-sm">
  23       One of three columns
  24     </div>
  25     <div class="col-sm">
  26       One of three columns
  27     </div>
  28     <div class="col-sm">
  29       One of three columns
  30     </div>
  31   </div>
  32 </div>
  33 </div>
  34
  35 The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
  36
  37 Breaking it down, here's how it works:
  38
  39 - Containers provide a means to center your site's contents. Use `.container` for fixed width or `.container-fluid` for full width.
  40 - Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on `.row` to ensure all your content is aligned properly down the left side.
  41 - Content should be placed within columns, and only columns may be immediate children of rows.
  42 - Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of `.col-sm` will each automatically be 25% wide for small breakpoints.
  43 - Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use `.col-sm-4`.
  44 - Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
  45 - Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
  46 - There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large.
  47 - Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices).
  48 - You can use predefined grid classes or Sass mixins for more semantic markup.
  49
  50 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers).
  51
  52 Sounds good? Great, let's move on to seeing all that in an example.
  53
  54 ## Grid options
  55
  56 While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
  57
  58 See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
  59
  60 <table class="table table-bordered table-striped table-responsive">
  61   <thead>
  62     <tr>
  63       <th></th>
  64       <th class="text-center">
  65         Extra small<br>
  66         <small>&lt;576px</small>
  67       </th>
  68       <th class="text-center">
  69         Small<br>
  70         <small>&ge;576px</small>
  71       </th>
  72       <th class="text-center">
  73         Medium<br>
  74         <small>&ge;768px</small>
  75       </th>
  76       <th class="text-center">
  77         Large<br>
  78         <small>&ge;992px</small>
  79       </th>
  80       <th class="text-center">
  81         Extra large<br>
  82         <small>&ge;1200px</small>
  83       </th>
  84     </tr>
  85   </thead>
  86   <tbody>
  87     <tr>
  88       <th class="text-nowrap" scope="row">Grid behavior</th>
  89       <td>Horizontal at all times</td>
  90       <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
  91     </tr>
  92     <tr>
  93       <th class="text-nowrap" scope="row">Max container width</th>
  94       <td>None (auto)</td>
  95       <td>540px</td>
  96       <td>720px</td>
  97       <td>960px</td>
  98       <td>1140px</td>
  99     </tr>
 100     <tr>
 101       <th class="text-nowrap" scope="row">Class prefix</th>
 102       <td><code>.col-</code></td>
 103       <td><code>.col-sm-</code></td>
 104       <td><code>.col-md-</code></td>
 105       <td><code>.col-lg-</code></td>
 106       <td><code>.col-xl-</code></td>
 107     </tr>
 108     <tr>
 109       <th class="text-nowrap" scope="row"># of columns</th>
 110       <td colspan="5">12</td>
 111     </tr>
 112     <tr>
 113       <th class="text-nowrap" scope="row">Gutter width</th>
 114       <td colspan="5">30px (15px on each side of a column)</td>
 115     </tr>
 116     <tr>
 117       <th class="text-nowrap" scope="row">Nestable</th>
 118       <td colspan="5">Yes</td>
 119     </tr>
 120     <tr>
 121       <th class="text-nowrap" scope="row">Offsets</th>
 122       <td colspan="5">Yes</td>
 123     </tr>
 124     <tr>
 125       <th class="text-nowrap" scope="row">Column ordering</th>
 126       <td colspan="5">Yes</td>
 127     </tr>
 128   </tbody>
 129 </table>
 130
 131 ## Auto-layout columns
 132
 133 Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 134
 135 ### Equal-width
 136
 137 For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
 138
 139 <div class="bd-example-row">
 140 {% example html %}
 141 <div class="container">
 142   <div class="row">
 143     <div class="col">
 144       1 of 2
 145     </div>
 146     <div class="col">
 147       1 of 2
 148     </div>
 149   </div>
 150   <div class="row">
 151     <div class="col">
 152       1 of 3
 153     </div>
 154     <div class="col">
 155       1 of 3
 156     </div>
 157     <div class="col">
 158       1 of 3
 159     </div>
 160   </div>
 161 </div>
 162 {% endexample %}
 163 </div>
 164
 165 ### Setting one column width
 166
 167 Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
 168
 169 <div class="bd-example-row">
 170 {% example html %}
 171 <div class="container">
 172   <div class="row">
 173     <div class="col">
 174       1 of 3
 175     </div>
 176     <div class="col-6">
 177       2 of 3 (wider)
 178     </div>
 179     <div class="col">
 180       3 of 3
 181     </div>
 182   </div>
 183   <div class="row">
 184     <div class="col">
 185       1 of 3
 186     </div>
 187     <div class="col-5">
 188       2 of 3 (wider)
 189     </div>
 190     <div class="col">
 191       3 of 3
 192     </div>
 193   </div>
 194 </div>
 195 {% endexample %}
 196 </div>
 197
 198 ### Variable width content
 199
 200 Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
 201
 202 <div class="bd-example-row">
 203 {% example html %}
 204 <div class="container">
 205   <div class="row justify-content-md-center">
 206     <div class="col col-lg-2">
 207       1 of 3
 208     </div>
 209     <div class="col-12 col-md-auto">
 210       Variable width content
 211     </div>
 212     <div class="col col-lg-2">
 213       3 of 3
 214     </div>
 215   </div>
 216   <div class="row">
 217     <div class="col">
 218       1 of 3
 219     </div>
 220     <div class="col-12 col-md-auto">
 221       Variable width content
 222     </div>
 223     <div class="col col-lg-2">
 224       3 of 3
 225     </div>
 226   </div>
 227 </div>
 228 {% endexample %}
 229 </div>
 230
 231 ### Equal-width multi-row
 232
 233 Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/utilities/display-property/).
 234
 235 <div class="bd-example-row">
 236 {% example html %}
 237 <div class="row">
 238   <div class="col">col</div>
 239   <div class="col">col</div>
 240   <div class="w-100"></div>
 241   <div class="col">col</div>
 242   <div class="col">col</div>
 243 </div>
 244 {% endexample %}
 245 </div>
 246
 247 ## Responsive classes
 248
 249 Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
 250
 251 ### All breakpoints
 252
 253 For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
 254
 255 <div class="bd-example-row">
 256 {% example html %}
 257 <div class="row">
 258   <div class="col">col</div>
 259   <div class="col">col</div>
 260   <div class="col">col</div>
 261   <div class="col">col</div>
 262 </div>
 263 <div class="row">
 264   <div class="col-8">col-8</div>
 265   <div class="col-4">col-4</div>
 266 </div>
 267 {% endexample %}
 268 </div>
 269
 270 ### Stacked to horizontal
 271
 272 Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
 273
 274 <div class="bd-example-row">
 275 {% example html %}
 276 <div class="row">
 277   <div class="col-sm-8">col-sm-8</div>
 278   <div class="col-sm-4">col-sm-4</div>
 279 </div>
 280 <div class="row">
 281   <div class="col-sm">col-sm</div>
 282   <div class="col-sm">col-sm</div>
 283   <div class="col-sm">col-sm</div>
 284 </div>
 285 {% endexample %}
 286 </div>
 287
 288 ### Mix and match
 289
 290 Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
 291
 292 <div class="bd-example-row">
 293 {% example html %}
 294 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 295 <div class="row">
 296   <div class="col col-md-8">.col .col-md-8</div>
 297   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 298 </div>
 299
 300 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 301 <div class="row">
 302   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 303   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 304   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 305 </div>
 306
 307 <!-- Columns are always 50% wide, on mobile and desktop -->
 308 <div class="row">
 309   <div class="col-6">.col-6</div>
 310   <div class="col-6">.col-6</div>
 311 </div>
 312 {% endexample %}
 313 </div>
 314
 315 ## Alignment
 316
 317 Use flexbox alignment utilities to vertically and horizontally align columns.
 318
 319 ### Vertical alignment
 320
 321 <div class="bd-example-row bd-example-row-flex-cols">
 322 {% example html %}
 323 <div class="container">
 324   <div class="row align-items-start">
 325     <div class="col">
 326       One of three columns
 327     </div>
 328     <div class="col">
 329       One of three columns
 330     </div>
 331     <div class="col">
 332       One of three columns
 333     </div>
 334   </div>
 335   <div class="row align-items-center">
 336     <div class="col">
 337       One of three columns
 338     </div>
 339     <div class="col">
 340       One of three columns
 341     </div>
 342     <div class="col">
 343       One of three columns
 344     </div>
 345   </div>
 346   <div class="row align-items-end">
 347     <div class="col">
 348       One of three columns
 349     </div>
 350     <div class="col">
 351       One of three columns
 352     </div>
 353     <div class="col">
 354       One of three columns
 355     </div>
 356   </div>
 357 </div>
 358 {% endexample %}
 359 </div>
 360
 361 <div class="bd-example-row bd-example-row-flex-cols">
 362 {% example html %}
 363 <div class="container">
 364   <div class="row">
 365     <div class="col align-self-start">
 366       One of three columns
 367     </div>
 368     <div class="col align-self-center">
 369       One of three columns
 370     </div>
 371     <div class="col align-self-end">
 372       One of three columns
 373     </div>
 374   </div>
 375 </div>
 376 {% endexample %}
 377 </div>
 378
 379 ### Horizontal alignment
 380
 381 <div class="bd-example-row">
 382 {% example html %}
 383 <div class="container">
 384   <div class="row justify-content-start">
 385     <div class="col-4">
 386       One of two columns
 387     </div>
 388     <div class="col-4">
 389       One of two columns
 390     </div>
 391   </div>
 392   <div class="row justify-content-center">
 393     <div class="col-4">
 394       One of two columns
 395     </div>
 396     <div class="col-4">
 397       One of two columns
 398     </div>
 399   </div>
 400   <div class="row justify-content-end">
 401     <div class="col-4">
 402       One of two columns
 403     </div>
 404     <div class="col-4">
 405       One of two columns
 406     </div>
 407   </div>
 408   <div class="row justify-content-around">
 409     <div class="col-4">
 410       One of two columns
 411     </div>
 412     <div class="col-4">
 413       One of two columns
 414     </div>
 415   </div>
 416   <div class="row justify-content-between">
 417     <div class="col-4">
 418       One of two columns
 419     </div>
 420     <div class="col-4">
 421       One of two columns
 422     </div>
 423   </div>
 424 </div>
 425 {% endexample %}
 426 </div>
 427
 428 ### No gutters
 429
 430 The gutters between columns in our predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
 431
 432 Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/utilities/spacing/).
 433
 434 {% highlight sass %}
 435 .no-gutters {
 436   margin-right: 0;
 437   margin-left: 0;
 438
 439   > .col,
 440   > [class*="col-"] {
 441     padding-right: 0;
 442     padding-left: 0;
 443   }
 444 }
 445 {% endhighlight %}
 446
 447 In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
 448
 449 <div class="bd-example-row">
 450 {% example html %}
 451 <div class="row no-gutters">
 452   <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
 453   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 454 </div>
 455 {% endexample %}
 456 </div>
 457
 458 ### Column wrapping
 459
 460 If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
 461
 462 <div class="bd-example-row">
 463 {% example html %}
 464 <div class="row">
 465   <div class="col-9">.col-9</div>
 466   <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
 467   <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
 468 </div>
 469 {% endexample %}
 470 </div>
 471
 472 ### Column resets
 473
 474 With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
 475
 476 <div class="bd-example-row">
 477 {% example html %}
 478 <div class="row">
 479   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 480   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 481
 482   <!-- Add the extra clearfix for only the required viewport -->
 483   <div class="clearfix hidden-sm-up"></div>
 484
 485   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 486   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 487 </div>
 488 {% endexample %}
 489 </div>
 490
 491 In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/examples/grid/).
 492
 493 <div class="bd-example-row">
 494 {% example html %}
 495 <div class="row">
 496   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
 497   <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
 498 </div>
 499
 500 <div class="row">
 501   <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
 502   <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
 503 </div>
 504 {% endexample %}
 505 </div>
 506
 507 ## Reordering
 508
 509 ### Flex order
 510
 511 Use flexbox utilities for controlling the **visual order** of your content.
 512
 513 <div class="bd-example-row">
 514 {% example html %}
 515 <div class="container">
 516   <div class="row">
 517     <div class="col flex-unordered">
 518       First, but unordered
 519     </div>
 520     <div class="col flex-last">
 521       Second, but last
 522     </div>
 523     <div class="col flex-first">
 524       Third, but first
 525     </div>
 526   </div>
 527 </div>
 528 {% endexample %}
 529 </div>
 530
 531 ### Offsetting columns
 532
 533 Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
 534
 535 <div class="bd-example-row">
 536 {% example html %}
 537 <div class="row">
 538   <div class="col-md-4">.col-md-4</div>
 539   <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
 540 </div>
 541 <div class="row">
 542   <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
 543   <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
 544 </div>
 545 <div class="row">
 546   <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
 547 </div>
 548 {% endexample %}
 549 </div>
 550
 551 ### Push and pull
 552
 553 Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
 554
 555 <div class="bd-example-row">
 556 {% example html %}
 557 <div class="row">
 558   <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
 559   <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
 560 </div>
 561 {% endexample %}
 562 </div>
 563
 564 ## Nesting
 565
 566 To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
 567
 568 <div class="bd-example-row">
 569 {% example html %}
 570 <div class="row">
 571   <div class="col-sm-9">
 572     Level 1: .col-sm-9
 573     <div class="row">
 574       <div class="col-8 col-sm-6">
 575         Level 2: .col-8 .col-sm-6
 576       </div>
 577       <div class="col-4 col-sm-6">
 578         Level 2: .col-4 .col-sm-6
 579       </div>
 580     </div>
 581   </div>
 582 </div>
 583 {% endexample %}
 584 </div>
 585
 586 ## Sass mixins
 587
 588 When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 589
 590 ### Variables
 591
 592 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 593
 594 {% highlight scss %}
 595 $grid-columns:      12;
 596 $grid-gutter-width-base: 30px;
 597
 598 $grid-gutter-widths: (
 599   xs: $grid-gutter-width-base, // 30px
 600   sm: $grid-gutter-width-base, // 30px
 601   md: $grid-gutter-width-base, // 30px
 602   lg: $grid-gutter-width-base, // 30px
 603   xl: $grid-gutter-width-base  // 30px
 604 )
 605
 606 $grid-breakpoints: (
 607   // Extra small screen / phone
 608   xs: 0,
 609   // Small screen / phone
 610   sm: 576px,
 611   // Medium screen / tablet
 612   md: 768px,
 613   // Large screen / desktop
 614   lg: 992px,
 615   // Extra large screen / wide desktop
 616   xl: 1200px
 617 );
 618
 619 $container-max-widths: (
 620   sm: 540px,
 621   md: 720px,
 622   lg: 960px,
 623   xl: 1140px
 624 );
 625 {% endhighlight %}
 626
 627 ### Mixins
 628
 629 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
 630
 631 {% highlight scss %}
 632 // Creates a wrapper for a series of columns
 633 @mixin make-row($gutters: $grid-gutter-widths) {
 634   display: flex;
 635   flex-wrap: wrap;
 636
 637   @each $breakpoint in map-keys($gutters) {
 638     @include media-breakpoint-up($breakpoint) {
 639       $gutter: map-get($gutters, $breakpoint);
 640       margin-right: ($gutter / -2);
 641       margin-left:  ($gutter / -2);
 642     }
 643   }
 644 }
 645
 646 // Make the element grid-ready (applying everything but the width)
 647 @mixin make-col-ready($gutters: $grid-gutter-widths) {
 648   position: relative;
 649   // Prevent columns from becoming too narrow when at smaller grid tiers by
 650   // always setting `width: 100%;`. This works because we use `flex` values
 651   // later on to override this initial width.
 652   width: 100%;
 653   min-height: 1px; // Prevent collapsing
 654
 655   @each $breakpoint in map-keys($gutters) {
 656     @include media-breakpoint-up($breakpoint) {
 657       $gutter: map-get($gutters, $breakpoint);
 658       padding-right: ($gutter / 2);
 659       padding-left:  ($gutter / 2);
 660     }
 661   }
 662 }
 663
 664 @mixin make-col($size, $columns: $grid-columns) {
 665   flex: 0 0 percentage($size / $columns);
 666   width: percentage($size / $columns);
 667   // Add a `max-width` to ensure content within each column does not blow out
 668   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 669   // do not appear to require this.
 670   max-width: percentage($size / $columns);
 671 }
 672
 673 // Get fancy by offsetting, or changing the sort order
 674 @mixin make-col-offset($size, $columns: $grid-columns) {
 675   margin-left: percentage($size / $columns);
 676 }
 677
 678 @mixin make-col-push($size, $columns: $grid-columns) {
 679   left: if($size > 0, percentage($size / $columns), auto);
 680 }
 681
 682 @mixin make-col-pull($size, $columns: $grid-columns) {
 683   right: if($size > 0, percentage($size / $columns), auto);
 684 }
 685 {% endhighlight %}
 686
 687 ### Example usage
 688
 689 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
 690
 691 See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.
 692
 693 {% highlight scss %}
 694 .container {
 695   max-width: 60em;
 696   @include make-container();
 697 }
 698 .row {
 699   @include make-row();
 700 }
 701 .content-main {
 702   @include make-col-ready();
 703
 704   @media (max-width: 32em) {
 705     @include make-col(6);
 706   }
 707   @media (min-width: 32.1em) {
 708     @include make-col(8);
 709   }
 710 }
 711 .content-secondary {
 712   @include make-col-ready();
 713
 714   @media (max-width: 32em) {
 715     @include make-col(6);
 716   }
 717   @media (min-width: 32.1em) {
 718     @include make-col(4);
 719   }
 720 }
 721 {% endhighlight %}
 722
 723 {% highlight html %}
 724 <div class="container">
 725   <div class="row">
 726     <div class="content-main">...</div>
 727     <div class="content-secondary">...</div>
 728   </div>
 729 </div>
 730 {% endhighlight %}
 731
 732 ## Customizing the grid
 733
 734 Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
 735
 736 ### Columns and gutters
 737
 738 The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
 739
 740 {% highlight scss %}
 741 $grid-columns:               12 !default;
 742 $grid-gutter-width-base:     30px !default;
 743 $grid-gutter-widths: (
 744   xs: $grid-gutter-width-base,
 745   sm: $grid-gutter-width-base,
 746   md: $grid-gutter-width-base,
 747   lg: $grid-gutter-width-base,
 748   xl: $grid-gutter-width-base
 749 ) !default;
 750 {% endhighlight %}
 751
 752 ### Grid tiers
 753
 754 Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
 755
 756 {% highlight scss %}
 757 $grid-breakpoints: (
 758   sm: 480px,
 759   md: 768px,
 760   lg: 1024px
 761 );
 762
 763 $container-max-widths: (
 764   sm: 420px,
 765   md: 720px,
 766   lg: 960px
 767 );
 768 {% endhighlight %}
 769
 770 When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.