Grid with rows -- no gutters

.rf-grid-row
.rf-col

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut
col
col
1/2
1/2
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6

Grid with rows -- gutters

.rf-grid-row .rf-grid-row--gutters
.rf-col

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut
col
col
1/2
1/2
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6

Grid without rows

.rf-grid-row .rf-grid-row--gutters
.rf-col-[number]

3/12
3/12
2/12
4/12
5/12
7/12
9/12
3/12
5/12
5/12
2/12
12/12

Grid without rows -- no gutters

.rf-grid-row
.rf-col-[number]

11/12
Lorem ipdim dzeobd ozbd ozbdez oubz
6/12
3/12
3/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12

Nested grid -- no gutters

col 8
6/12
6/12
col 4
col 6
3/12
3/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12

Nested grid -- gutters

col 8
6/12
6/12
col 4
col 6
3/12
3/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12

Vertical alignment

Grid -- top alignment

Top aligned cell
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
Top aligned cell
Top aligned cell

Grid -- bottom alignment

Bottom aligned cell
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
Bottom aligned cell
Bottom aligned cell

Grid -- center alignment

Center aligned cell
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
Center aligned cell
Center aligned cell

Grid -- mixed alignment

Cell
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
Bottom aligned cell
Center aligned cell
Top aligned cell

Horizontal alignment

Grid -- left alignment (default)

Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
left aligned cell

Grid -- end alignment

end aligned cell
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.

Grid -- center alignment

centered cell
centered cell

Grid -- offsetting cells

3/12
3/12 - offset 3/12
3/12
3/12 - responsive offsets

Grid - full

<% for (let i = 0; i < 12; i++) { %>
1/12
<% } %>

Grid - full

xs-12 / sm-10 / md-8 / lg-6 / xl-4
12/12

Grid - full

xs-12 / sm-10 / md-8 / lg-6 / xl-4
12/12

Grid - full -- with gutters

6/12
6/12
3/12
3/12
3/12
12/12