npm install basscss-grid
This module contains responsive float and width utilities 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.
``html`
To optionally set a max-width, use a utility from the basscss-layout module.
The .mx-auto utility sets margin left and right auto to center the container.
`html`
Float columns using the .col style. This also sets box-sizing border-box for each column.
`html`
.col
.col
Add column width utilities. The total column-width number should add up to 12.
`html`
.col.col-6
.col.col-6
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.
`html`
.sm-col.sm-col-6
.sm-col.sm-col-6
Add width adjustments for larger breakpoints. Resize the viewport width of the browser to see the effect.
`html`
.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8
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.
`html`
.px2
.px2
For larger or smaller gutters, use any other step on the white space scale.
`html`
.px1
.px1
.px3
.px3
`html`
Unnested
Nested
Nested
class to float columns right.`html
.col-right.col-6
.col.col-6
`Centering Columns
Use the class to center columns within their containers.`html
Centered Column
`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.html
.sm-col
.overflow-hidden
`Width Utilities
Column width utilities can also be used independently to add percentage based widths to any block or inline-block element.html
.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.
``