CSS(SCSS) Grid Layout – Atomic Bulldog Grid

Preview:

Description:

Atomic Bulldog Grid is a CSS(SCSS) library to generate modern, responsive, flexible grid layout using the CSS Grid Layout technology. The library also provides a fallback that uses CSS flexbox.

How to use it:

Add the main stylesheet and fallback CSS files to the webpage.

<link rel="stylesheet" href="/path/to/atomic-bulldog-grid.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback-ie.css">

The basic HTML structure to create a grid layout.

<div class="grid">
  <div>
      <div class="example--item">
          <p>Item 1</p>
      </div>
  </div>
  <div>
      <div class="example--item">
          <p>Item 2</p>
      </div>
  </div>
  <div>
      <div class="example--item">
          <p>Item 3</p>
      </div>
  </div>
  ...
</div>

The CSS classes to customize the grid layout.

• .has-cols-{breakpoint}-{number of columns}: the number of columns
• .has-grid-gap-{breakpoint}-{spacer}: space between grid items
• .has-row-{breakpoint}-{number of rows}: the number of rows
• .is-dense: if is dense

Config the library by overriding the default variables in the following files:

• _breakpoints.scss
• _container-sizes.scss
• _grid.scss
• _root-classes.scss
• _spacers.scss