CSS Flexbox Grid with Astral.CSS

Astral.CSS's flex grid offers a simple, customizable way to create responsive layouts. Cross-browser compatible, it's perfect for modern, adaptive web design.

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.

Getting Started with Astral.CSS Flex Grid

To build a basic responsive layout with Astral.CSS:

  1. Add a container with the columns class
  2. Insert as many col elements as needed.
  3. That’s it! Every column automatically gets equal width, no matter how many you have.
First column
Second column
Third column
Fourth column
            


  

      First column
  

  

      Second column
  

  

      Third column
  

  

      Fourth column

Columns Sizes

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
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

  

    

          

            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

Nesting

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…
First column
First nested column
Second nested column
Second column
50%
Auto
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
2
3
4
5

  

    

      

        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.

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 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
      
        

          

            
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
There are other variants of offset which are offset-1 to offset-11 to set margin left.It's responsive variant are offset-sm-1 to offset-sm-11
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
  
    

      

        
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

Alignment

Use alignment classes to position your content just the way you want—vertically, horizontally, or both.

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

     
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

      
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

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 

   

     
First in DOM, no order applied

     
Second in DOM, with a larger order

     
Third in DOM, with an order of 1
Astral.CSS's flex grid system is built for developers who value simplicity, flexibility, and performance. Start building amazing layouts today! 🎉