ALGS
Another Less Grid System
mobile first
responsive
easy customization
auto clear rows
lightweight (2.4KB gzipped)
ie9+ compatible (ie6-8 with
Respond.js
)
GitHub
Download
Default grid
<div class="grid">
Double gutter grid
<div class="grid g-2">
Half gutter grid
<div class="grid g-1-2">
No gutter grid
<div class="grid g-0">
Default grid auto clear
<div class="grid auto-clear">
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#9 text line
#10 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#9 text line
#10 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#9 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#9 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#9 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#1 text line
#2 text line
#3 text line
#4 text line
#1 text line
#2 text line
#3 text line
#4 text line
#1 text line
#2 text line
#3 text line
#4 text line
#1 text line
#2 text line
#3 text line
#1 text line
#2 text line
#3 text line
#1 text line
#2 text line
#3 text line
#1 text line
#2 text line
Responsive classes
default = 2, 3, 4, 5, 6, 8, 12 columns
prefix xs-* = @media (max-width: 450px) 2, 3 and 4 columns
prefix sm-* = @media (min-width: 451px) 2, 3, 4 and 5 columns
prefix md-* = @media (min-width: 769px) 2, 3, 4, 5 and 6 columns
prefix lg-* = @media (min-width: 993px) 2, 3, 4, 5, 6, 8, 12 columns
prefix xl-* = @media (min-width: 1201px) 2, 3, 4, 5, 6, 8, 12 columns
Multiple column width
Column offset
.col-off-*-*
Flex columns
<div class="grid flex">
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#1 text line
#2 text line
#3 text line
#4 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
Flex columns stretch
<div class="grid flex stretch">
#1 text line
#2 text line
#3 text line
#4 text line
#1 text line
#2 text line
#3 text line
#4 text line
#5 text line
#6 text line
#7 text line
#8 text line
#1 text line
#2 text line
#3 text line
#4 text line