2.0.0 • Published 7 years ago
native-grid v2.0.0
native-grid
A responsive CSS native grid layout.
Usage
Include the following stylesheet into your page:
<link rel="stylesheet" href="./native-grid/dist/grid.css" />
Use the prefixes to define the grid column behavior in multiple breakpoints:
<div class="grid">
<div class="grid__col md:grid__col--3 lg:grid__col--8">1</div>
<div class="grid__col md:grid__col--6 lg:grid__col--2">2</div>
<div class="grid__col md:grid__col--3 lg:grid__col--2">3</div>
</div>
Prefixes
xs
- Extra small breakpoint (min-width: 0
)sm
- Small breakpoint (min-width: 36rem
)md
- Medium breakpoint (min-width: 48rem
)lg
- Large breakpoint (min-width: 62rem
)xl
- Extra large breakpoint (min-width: 75rem
)
Options
Gutter
The grid has a default gutter of 1rem
between it's columns, but you can customize it using the following options:
- Small gutter (
.5rem
): Add thegrid--small-gutter
class to your grid container element; - Zero gutter: Add the
grid--no-gutter
class to your grid container element.
Column system
The default column system is based on 12
, but it also can be set as a 16-column grid system applying the grid--16-column
class to your grid container element:
<div class="grid grid--16-column">
<div class="grid__col md:grid__col--6">1</div>
<div class="grid__col md:grid__col--4">2</div>
<div class="grid__col md:grid__col--3">3</div>
<div class="grid__col md:grid__col--3">4</div>
</div>