Skip to content
Easy to use grid system for modern browsers and IE11.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
sass
.gitignore
CHANGELOG.md
LICENSE.md
README.md
package.json
webpack.mix.js

README.md

grid.sass

Package name Downloads each month Downloads each month Latest Stable Version

💡 About grid.sass

The grid.sass package is a tiny and easy to use Sass file for creating a grid-based layout across all common browsers including Internet Explorer 11.

⚓️ Anchors

📦 Download / Install

CDN

If the default configuration for grid.sass suits your needs, the recommended way for including the CSS file to your project is via CDN:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/grid.sass/dist/grid.css">

NPM

If you want to directly include the created classes to your project files or want to modify grid.sass feel free to get the package:

npm install grid.sass

After that you can easily include grid.sass to your Sass or Scss file like so:

// Scss
@import '~grid.sass';

// Sass
@import '~grid.sass'

Direct Download

While not recommended you can also download the project files here:

Get grid.css (compiled version) or grid.sass (raw version).

⬆ back to top

💅 Classes

The grid.sass compiles to a set of classes you can see listed here:

CSS class Description
grid Required class for the wrapping container.
grid--full* Span a children across all columns.
grid--span-{columns}* Span a children across multible columns.
grid--flex Required class for a flexible column layout.
grid--flex-{columns}* Defines the amount of columns all children will be placed with.

Classes with an  * star at the end can be used with a breakpoint modifier like --t.

⬆ back to top

📖 Examples

In order to use grid.sass you can simply add the grid class to your wrapping element and already get you column-based layout. (12 columns by default)

Below you will find some examples using all classes the grid.sass package is providing. Keep in mind that your configuration for grid.sass may vary.

All examples:

  1. Basic Setup
  2. Span Across Multible Columns
  3. Using Breakpoint Modifiers
  4. Flexible Grid Layout
  5. Breakpoint Modifiers for grid-flex

1. Basic Setup

Setting up grid.sass is as easy as think. Simply add the grid class to the wrapping container and you are done:

<div class="grid">
    <div>Column 1</div>
    <div>Column 2</div>
    <!-- ... -->
</div>

⬆ Examples  |  ⬆ back to top

2. Span Across Multible Columns

Since in most cases you will need to span across multible columns (e.g. three boxes side by side) grid.sass has a handy helper for that:

<div class="grid">
    <div class="grid--span-4">Box 1</div>
    <div class="grid--span-4">Box 2</div>
    <div class="grid--span-4">Box 3</div>
</div>

⬆ Examples  |  ⬆ back to top

3. Using Breakpoint Modifiers

In some cases your content may vary between different types of devices / screens. For that grid.sass provides the easy to use breakpoint modifiers.

The following example will show three boxes side by side. (See Example #2) But for mobile devices the boxes will be spanned across the full layout.

<div class="grid">
    <div class="grid--span-4 grid--full--m">Box 1</div>
    <div class="grid--span-4 grid--full--m">Box 2</div>
    <div class="grid--span-4 grid--full--m">Box 3</div>
</div>

⬆ Examples  |  ⬆ back to top

4. Flexible Grid Layout

In some cases you will run into a limit with your given column layout. (e.g. displaying 5 equal columns on a 12-column-based layout)

Therefore the grid--flex class can help you as long as you don't need to span across multible columns.

<div class="grid grid--flex grid--flex-5">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
</div>

⬆ Examples  |  ⬆ back to top

5. Breakpoint Modifiers for grid-flex

Like the normal gird you can also use the breakpoint modifiers to change the layout of the grid--flex class.

With the given Example above you might want to change layout for mobile devices to a 3-column-based layout on tablets like here:

<div class="grid grid--flex grid--flex-5 grid--flex-3--t">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
</div>

⬆ Examples  |  ⬆ back to top

♻️ Variables

The grid.sass package is build with modification in mind. Therefor everthing can be changed or alternated to your needs.

You can modify these variables:

$grid-sass--flex

The flex variable determines whether the grid--flex class and its helper classes should generated.

Default Value:

$grid-sass--flex: true;

⬆ Variables  |  ⬆ back to top

$grid-sass--columns

Determines the amount of columns your layout should be based on.

Default Value:

$grid-sass--columns: 12;

⬆ Variables  |  ⬆ back to top

$grid-sass--gaps

The grid.sass package uses the Map-type for Sass/Scss. These can be basically seen as objects containing key-value pairs.

For the gap configuration the gap size has to given with the key null.

If you have alternating gap sizes (like the default one) you can name the breakpoint as well as the changed gap size.

Note: You mustn't provide a gap size for each breakpoint since it will bloat the resulting file size.

Default Value:

$grid-sass--gaps: (
    null: 2rem,
    '--t': 1rem
);

⬆ Variables  |  ⬆ back to top

$grid-sass--breakpoints

The grid.sass package uses the Map-type for Sass/Scss. These can be basically seen as objects containing key-value pairs.

In order to provide alternating column configuration or gap sizes you will need to define one or multible breakpoints.

In order to work properly you need to have a null: null pair within the Map.

Besides that you can add as many breakpoints as you like. The key of each pair is the breakpoint modifier (conatining the --) and the respective value contains the media query (without the @media keyword) when the breakpoint starts.

Default Value:

$grid-sass--breakpoints: (
    null: null,
    '--t': '(max-width: 1299px)',
    '--m': '(max-width: 699px)'
);

⬆ Variables  |  ⬆ back to top

🛠 Modify grid.sass

For most projects you might want to modify grid.sass to your needs.

You can easily modify the configuration for this by simply defining the variables listed above before you import grid.sass.

Here is a short example in Sass:

$grid-sass--flex: false
$grid-sass--columns: 8

@import '~grid.sass'

⬆ back to top

🗝 Licence

Pile is released under the MIT License. See the bundled LICENSE file for details.

⬆ back to top

You can’t perform that action at this time.