Lattice is a responsive flexbox-based CSS grid library that utilizes BEM naming conventions. Lattice is fully-featured and is built with customization in mind.

Lattice is default first in that the grid is tuned to whichever viewport size you would prefer to optimize for first.

View Demo

• Installation
• Import
• Usage
  • Container
  • Grid
  • Columns
  • Nesting
  • Responsive
  • Settings
• Compatibility
• License

yarn add lattice.css

npm install lattice.css

Download lattice.min.css

@import '~lattice.css';

import 'lattice.css';

<div class="container">
  <div class="grid">
    <div class="grid__col-4"></div>
    <div class="grid__col-4"></div>
    <div class="grid__col-4"></div>
  </div>
</div>

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

The container class is used as a base container for the grid and adapts to each breakpoint.

You can use the modifier class container--fluid to always have the container be 100% of the parent element.

<div class="grid"></div>

The grid class defines each row of the grid.

• grid--center: Horizontally center columns
• grid--justify: Evenly space out columns
• grid--left: Left align columns
• grid--right: Right align columns
• grid--top: Top align columns
• grid--middle: Vertically center columns
• grid--bottom: Bottom align columns
• grid--stretch: Stretch columns to the height of the grid element
• grid--no-gutters: Remove gutters from columns

// Specified width column
<div class="grid__col-{number}"></div>

// Unspecified width column
<div class="grid__col"></div>

Lattice is based on a 12 column layout so the total number of column width values should ideally add up to 12.

The grid__col-{number} class defines each column of the grid. Column widths can be set by using a number between 1 and 12.

// This will use 6/12 or 50% of the space
<div class="grid">
  <div class="grid__col-6"></div>
</div>

// This will use 12/12 or 100% of the space
<div class="grid">
  <div class="grid__col-12"></div>
</div>

Alternatively, you can use the grid__col class to define a column that will take as much space as it can. The grid__col class will use up as much space as possible before wrapping.

// This will use 100% of the space
<div class="grid">
  <div class="grid__col"></div>
</div>

// Each grid__col will use 50% of the space
<div class="grid">
  <div class="grid__col"></div>
  <div class="grid__col"></div>
</div>

You can use grid__col-{number} and grid__col definitions in the same grid row.

<div class="grid">
  // This will use 50% of the space
  <div class="grid__col-6"></div>

  // This will use the remaining space (i.e., 50%)
  <div class="grid__col"></div>
</div>

• grid__col--left: Left align the column
• grid__col--right: Right align the column
• grid__col--top: Top align the column
• grid__col--middle: Vertically center the column
• grid__col--bottom: Bottom align the column
• grid__col--stretch: Stretch the column to the height of the grid element
• grid__col--no-gutters: Removes the gutters from the column
• grid__col--hidden: Hide the column
• grid__col--visible: Show the column
• grid__col--order-{number}: Re-order the column based on the {number} specified (between 1 and 12)
• grid__col--order-first: Place the column as the first element irrespective of source order
• grid__col--order-last: Place the column as the last element irrespective of source order
• grid__col--offset-{number}: Offset the column based on the {number} specified (between 0 and 12)

Grids can be nested within one another like so:

<div class="container">
  <div class="grid">
    <div class="grid__col-6">
      <div class="grid">
        <div class="grid__col-6"></div>
        <div class="grid__col-6"></div>
      </div>
    </div>
    <div class="grid__col-6">
      <div class="grid">
        <div class="grid__col-4"></div>
        <div class="grid__col-4"></div>
        <div class="grid__col-4"></div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="grid">
    <div class="grid__col-4 md-grid__col-6 sm-grid__col-12"></div>
    <div class="grid__col-4 md-grid__col-6 sm-grid__col-12"></div>
    <div class="grid__col-4 md-grid__col-12"></div>
  </div>
</div>

• xl: XLarge screens
• lg: Large screens and smaller
• md: Medium screens and smaller
• sm: Small screens and smaller
• xs: XSmall screens

All column classes have a responsive counterpart based off of the responsive namespaces. Additionally, all grid and column modifier classes also have a responsive counterpart based off of the responsive namespaces.

For example, to center align all columns within a grid at the small breakpoint you could use the class sm-grid--center.

• {namespace}-grid--center
• {namespace}-grid--justify
• {namespace}-grid--left
• {namespace}-grid--right
• {namespace}-grid--top
• {namespace}-grid--middle
• {namespace}-grid--bottom
• {namespace}-grid--stretch
• {namespace}-grid--no-gutters

• {namespace}-grid__col--left
• {namespace}-grid__col--right
• {namespace}-grid__col--top
• {namespace}-grid__col--middle
• {namespace}-grid__col--bottom
• {namespace}-grid__col--stretch
• {namespace}-grid__col--no-gutters
• {namespace}-grid__col--hidden
• {namespace}-grid__col--visible
• {namespace}-grid__col--order-{number}
• {namespace}-grid__col--order-first
• {namespace}-grid__col--order-last
• {namespace}-grid__col--offset-{number}

@include lattice-screen-md-only {
  // Some CSS
}

If you are using lattice with SASS, you can access the built in responsive mixins.

• lattice-screen-xl-min: XLarge screens
• lattice-screen-lg-only: Large screens
• lattice-screen-lg-max: Large screens and smaller
• lattice-screen-lg-min: Large screens and larger
• lattice-screen-md-only: Medium screens
• lattice-screen-md-max: Medium screens and smaller
• lattice-screen-md-min: Medium screens and larger
• lattice-screen-sm-only: Small screens
• lattice-screen-sm-max: Small screens and smaller
• lattice-screen-sm-min: Small screens and larger
• lattice-screen-xs-max: XSmall screens

• $lattice-enable-responsive: Enable responsive classes (default: true)

• $lattice-breakpoint-lg: Large screen breakpoint (default: 1200px)
• $lattice-breakpoint-md: Medium screen breakpoint (default: 992px)
• $lattice-breakpoint-sm: Small screen breakpoint (default: 768px)
• $lattice-breakpoint-xs: XSmall screen breakpoint (default: 544px)

Note: There is no xlarge screen breakpoint setting as this is automatically calculated from the large screen breakpoint.

• $lattice-container-width-default: Container default width (default: 1140px)
• $lattice-container-width-xl: Container width on large screens (default: 1140px)
• $lattice-container-width-lg: Container width on large screens (default: 940px)
• $lattice-container-width-md: Container width on medium screens (default: 720px)
• $lattice-container-width-sm: Container width on small screens (default: 576px)
• $lattice-container-width-xs: Container width on xsmall screens (default: 100%)

• $lattice-gutter-width-default: Column gutter default width (default: 15px)
• $lattice-gutter-width-xl: Column gutter width on large screens (default: $lattice-gutter-width-default)
• $lattice-gutter-width-lg: Column gutter width on large screens (default: $lattice-gutter-width-default)
• $lattice-gutter-width-md: Column gutter width on medium screens (default: $lattice-gutter-width-default)
• $lattice-gutter-width-sm: Column gutter width on small screens (default: $lattice-gutter-width-default)
• $lattice-gutter-width-xs: Column gutter width on xsmall screens (default: $lattice-gutter-width-default)

Lattice is compatible wherever the flexbox specification has been implemented.

• Chrome 21
• Firefox 28
• Safari 6.1
• Opera 21.1
• Internet Explorer 10

For a more comprehensive list, see http://caniuse.com/#feat=flexbox.

Code released under the MIT License.