Astral.CSS

A simple way to build responsive columns powered by Flexbox
.

Astral CSS Framework offers a powerful flex grid system that simplifies the creation of responsive layouts. Leveraging the flexibility of CSS Flexbox, Astral's flex grid allows you to design complex, adaptive web pages with ease.

Example

Using Astral's flex grid is simple and intuitive. Here's a basic example to get you started:

Add a columns container
Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

First column

Second column

Third column

Fourth column

            

  
      First column
  
  
      Second column
  
  
      Third column
  
  
      Fourth column

Columns Sizes

If you want to change the size of a single column, you can use one of the following classes from col-1 to col-12

col-12

col-11

Auto

col-10

Auto

col-9

Auto

col-8

Auto

col-7

Auto

col-6

Auto

col-5

Auto

col-4

Auto

col-3

Auto

col-2

Auto

col-1

Auto

      

  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

Auto width

You can add the col-auto class to the column to have auto width columns. There are col-xl-auto, col-lg-auto, col-md-auto and col-sm-autoto set auto width in different viewport sizes.

col-auto

col

col-lg-auto

col

      

  col-auto
  col


  col-lig-auto
  col

Nesting

You can nest columns to have more flexibility in your design. You only need to follow this structure:

columns: top-level columns container
- column
  - columns: nested columns
    - column and so on…

First column

First nested column

Second nested column

Second column

50%

Auto

      

  
    First column
  
    
      First nested column
    
   
    Second nested column
   
  


  Second column
  
    
      50%
   
  
    Auto
 
 
   Auto

Different Columns sizes per breakpoints

You can define a column size for each viewport size: mobile, tablet, and desktop.

col-sm-9
col-md-8
col-lg-6
col-xl-3



  
    col-sm-9

    col-md-8

    col-lg-6

    col-xl-3

 
  2
  3
  4
  5

Offset

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

col-2

col-4 col-ml-auto

col-2

col-4 col-mx-auto

col-2

col-4 col-mr-auto

col-2

col-4 col-mx-auto



  col-2
  col-4 col-ml-auto


  col-4 col-ml-auto
  col-2


  col-4 col-mx-auto
  col-2


  col-4 col-mr-auto
  col-2


  col-4 col-mx-auto

Alignment

Vertical Aligment

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 three columns
      One of three columns

Horizontal Aligment

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
      One of two columns

Reordering

Order Classes

Use order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1


   
     First in DOM, no order applied
     Second in DOM, with a larger order
     Third in DOM, with an order of 1

The Astral CSS Framework's flex grid system is a powerful tool for creating responsive, flexible layouts. With its simple syntax, customizable settings, and cross-browser compatibility, Astral makes it easy to build modern, adaptive web pages. Start using Astral's flex grid today and elevate your web design!

On this page

Example
Column Sizes
Auto Width
12 Column System
Nesting
Different Column sizes per breakpoint
Offset
Alignment
Reordering

Astral.CSS

Flex

A simple way to build responsive columns powered by Flexbox .

Example

Columns Sizes

Auto width

Nesting

Different Columns sizes per breakpoints

Offset

Alignment

Vertical Aligment

Horizontal Aligment

Reordering

Order Classes

A simple way to build responsive columns powered by Flexbox
.