Astral.CSS makes building responsive layouts a breeze with its flex grid system. Powered by CSS Flexbox, it's simple, customizable, and works seamlessly across all major browsers. Whether you're designing for small screens or big ones, Astral.CSS has you covered for modern, adaptive web design.
To build a basic responsive layout with Astral.CSS:
columns classcol elements as needed.
First column
Second column
Third column
Fourth column
Need a column to take up more (or less) space? Astral.CSS makes it easy with
classes like col-1 to col-12
Here's an example:
col-12
col-11
col-10
col-9
col-8
col-7
col-6
col-5
col-4
col-3
col-2
col-1
col-12
col-11
Auto
col-10
Auto
Auto
col-9
Auto
Auto
col-8
Auto
Auto
col-7
Auto
Auto
col-6
Auto
Auto
col-5
Auto
Auto
col-4
Auto
Auto
col-3
Auto
Auto
col-2
Auto
Auto
col-1
Auto
Auto
Want to add more flexibility? Nest columns inside other columns!. You only need to follow this structure:
columns: top-level columns container
col
columns: nested columns
col and so on…
1st column
1st nested column
2nd nested column
2nd column
50%
Auto
Auto
You can define a column size for each viewport size: mobile, tablet, and desktop.
col-sm-9col-md-8col-lg-6col-xl-3
col-sm-9
col-md-8
col-lg-6
col-xl-3
2
3
Add space between columns with offset classes like offset-1 to offset-11. Responsive offsets are also available (e.g., offset-sm-2).
col-2 col-4 offset-1col-2 col-4 offset-2col-2 col-4 offset-3col-2 col-4 offset-4col-2 col-4 offset-5col-2 col-4 offset-6
col-2
col-4 offset-1
col-2
col-4 offset-2
col-2
col-4 offset-3
col-2
col-4 offset-4
col-2
col-4 offset-5
col-2
col-4 offset-6
Use alignment classes to position your content just the way you want—vertically, horizontally, or both.
Use flexbox alignment utilities to vertically and horizontally align columns.
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
Want to rearrange your columns? Use order- classes! They're responsive, so you can tweak the order based on screen size.
First in DOM, no order applied
Second in DOM, with a larger order of 5
Third in DOM, with an order of 1
Designed and built with ♥ by Rume Aluya.