Grid

This module contains responsive float and width utilities, along with a container style, to create a variety of grid layouts. Use this module in combination with layout, white space, and other utilities.

Start by using a .clearfix container. Optionally use a .container to set a max-width. To adjust the max-width, set a new value with the --container-width custom property.

<div class="container">
  <div class="clearfix">
  </div>
</div>

Float columns using the .col style. This also sets box-sizing border-box for each column.

.col

<div class="clearfix border">
  <div class="col border">.col</div>
  <div class="col border">.col</div>
</div>

Add column width utilities. The total column-width number should add up to 12.

.col.col-6

<div class="clearfix border">
  <div class="col col-6 border">.col.col-6</div>
  <div class="col col-6 border">.col.col-6</div>
</div>

Responsive Grid

Use breakpoint-prefixed column utilities to change the grid at different screen widths.

All breakpoint-based styles in Basscss follow the same naming convention.

Prefix	Description
(no prefix)	Not scoped to a breakpoint
sm-	--breakpoint-sm (default: min-width 40em)
md-	--breakpoint-md (default: min-width 52em)
lg-	--breakpoint-lg (default: min-width 64em)

Apply the grid from the small breakpoint and up with the .sm-col and .sm-col-6 utilities.

.sm-col.sm-col-6

<div class="clearfix border">
  <div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
  <div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
</div>

Add width adjustments for larger breakpoints. Resize the viewport width of the browser to see the effect.

.sm-col.sm-col-6.md-col-5.lg-col-4

.sm-col.sm-col-6.md-col-7.lg-col-8

<div class="clearfix border">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 border">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 border">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>

Gutters

Use padding and negative margin utilities to create gutters based on the white space scale. The negative margin ensures content inside each column lines up with content outside of the grid. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.

Create gutters with a width of 2 units using .mxn2 and .px2.

.px2

<div class="clearfix mxn2 border">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">.px2</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div class="border">.px2</div></div>
</div>

For larger or smaller gutters, use any other step on the white space scale.

.px1

.px3

<div class="clearfix mxn1 border">
  <div class="col col-6 px1"><div class="border">.px1</div></div>
  <div class="col col-6 px1"><div class="border">.px1</div></div>
</div>
<div class="clearfix mxn3 border">
  <div class="col col-6 px3"><div class="border">.px3</div></div>
  <div class="col col-6 px3"><div class="border">.px3</div></div>
</div>

Nesting

Nest entire grid structures within columns to created nested grids.

Unnested

Nested

<div class="clearfix mxn2 border">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">Unnested</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
    <div class="clearfix mxn2">
      <div class="col col-6 px2"><div class="border">Nested</div></div>
      <div class="col col-6 px2"><div class="border">Nested</div></div>
    </div>
  </div>
</div>

Reversed

To reverse the order of columns, use the .col-right class to float columns right.

.col-right.col-6

.col.col-6

<div class="clearfix border">
  <div class="col-right col-6 border">.col-right.col-6</div>
  <div class="col col-6 border">.col.col-6</div>
</div>

Centering Columns

Use the .mx-auto class to center columns within their containers.

Centered Column

<div class="clearfix mxn2 border">
  <div class="col-8 px2 mx-auto">
    <div class="border">Centered Column</div>
  </div>
</div>

Breakpoint Based Floats

Column float utilities can be used independently of width utilities to control floating at different breakpoints. This example demonstrates a responsive media object.

.sm-col

.overflow-hidden

<div class="clearfix border">
  <div class="sm-col p2 border">.sm-col</div>
  <div class="overflow-hidden border">.overflow-hidden</div>
</div>

Width Utilities

Column width utilities can also be used independently to add percentage based widths to any block or inline-block element.

.sm-col-6.md-col-4

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

<div class="border">
  <div class="right sm-col-6 md-col-4 p2 border">.sm-col-6.md-col-4</div>
  <p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>

CSS Source

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}
.col {
  float: left;
  box-sizing: border-box;
}

.col-right {
  float: right;
  box-sizing: border-box;
}

.col-1 {
  width: calc(1/12 * 100%);
}

.col-2 {
  width: calc(2/12 * 100%);
}

.col-3 {
  width: calc(3/12 * 100%);
}

.col-4 {
  width: calc(4/12 * 100%);
}

.col-5 {
  width: calc(5/12 * 100%);
}

.col-6 {
  width: calc(6/12 * 100%);
}

.col-7 {
  width: calc(7/12 * 100%);
}

.col-8 {
  width: calc(8/12 * 100%);
}

.col-9 {
  width: calc(9/12 * 100%);
}

.col-10 {
  width: calc(10/12 * 100%);
}

.col-11 {
  width: calc(11/12 * 100%);
}

.col-12 {
  width: 100%;
}
@media (--breakpoint-sm) {

  .sm-col {
    float: left;
    box-sizing: border-box;
  }

  .sm-col-right {
    float: right;
    box-sizing: border-box;
  }

  .sm-col-1 {
    width: calc(1/12 * 100%);
  }

  .sm-col-2 {
    width: calc(2/12 * 100%);
  }

  .sm-col-3 {
    width: calc(3/12 * 100%);
  }

  .sm-col-4 {
    width: calc(4/12 * 100%);
  }

  .sm-col-5 {
    width: calc(5/12 * 100%);
  }

  .sm-col-6 {
    width: calc(6/12 * 100%);
  }

  .sm-col-7 {
    width: calc(7/12 * 100%);
  }

  .sm-col-8 {
    width: calc(8/12 * 100%);
  }

  .sm-col-9 {
    width: calc(9/12 * 100%);
  }

  .sm-col-10 {
    width: calc(10/12 * 100%);
  }

  .sm-col-11 {
    width: calc(11/12 * 100%);
  }

  .sm-col-12 {
    width: 100%;
  }

}
@media (--breakpoint-md) {

  .md-col {
    float: left;
    box-sizing: border-box;
  }

  .md-col-right {
    float: right;
    box-sizing: border-box;
  }

  .md-col-1 {
    width: calc(1/12 * 100%);
  }

  .md-col-2 {
    width: calc(2/12 * 100%);
  }

  .md-col-3 {
    width: calc(3/12 * 100%);
  }

  .md-col-4 {
    width: calc(4/12 * 100%);
  }

  .md-col-5 {
    width: calc(5/12 * 100%);
  }

  .md-col-6 {
    width: calc(6/12 * 100%);
  }

  .md-col-7 {
    width: calc(7/12 * 100%);
  }

  .md-col-8 {
    width: calc(8/12 * 100%);
  }

  .md-col-9 {
    width: calc(9/12 * 100%);
  }

  .md-col-10 {
    width: calc(10/12 * 100%);
  }

  .md-col-11 {
    width: calc(11/12 * 100%);
  }

  .md-col-12 {
    width: 100%;
  }

}
@media (--breakpoint-lg) {

  .lg-col {
    float: left;
    box-sizing: border-box;
  }

  .lg-col-right {
    float: right;
    box-sizing: border-box;
  }

  .lg-col-1 {
    width: calc(1/12 * 100%);
  }

  .lg-col-2 {
    width: calc(2/12 * 100%);
  }

  .lg-col-3 {
    width: calc(3/12 * 100%);
  }

  .lg-col-4 {
    width: calc(4/12 * 100%);
  }

  .lg-col-5 {
    width: calc(5/12 * 100%);
  }

  .lg-col-6 {
    width: calc(6/12 * 100%);
  }

  .lg-col-7 {
    width: calc(7/12 * 100%);
  }

  .lg-col-8 {
    width: calc(8/12 * 100%);
  }

  .lg-col-9 {
    width: calc(9/12 * 100%);
  }

  .lg-col-10 {
    width: calc(10/12 * 100%);
  }

  .lg-col-11 {
    width: calc(11/12 * 100%);
  }

  .lg-col-12 {
    width: 100%;
  }

}

60 Rules

60 Selectors

123 Declarations

61 Properties

Responsive States

Flex Object