Grid

Content that isn't visually organized can overwhelm users and make it more difficult to scan a page. If users can't find the information they're looking for easily, they may leave the page.

Grids support proper spacing and alignment of content to create a clean user flow and reduce visual clutter to help users visually understand the content structure and improve scannability. This assist users with finding information quickly.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Structure and layout

Demo

Configure: select the dropdowns below to display the variety of options that a grid supports.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usability best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


The grid system is incredibly flexible. It has 12 columns available per row, allowing one to create different combinations of elements that span any number of columns.


The grid system supports six responsive breakpoints which allows the granuality of determining how each column or combination of columns behaves at each breakpoint. On mobile screens such as tablets and smart phones, grid columns automatically stack due to limited screen space.


Grids can be nested within each other to create even more dynamic layouts. They can also be used within other components such as accordions, content blocks (without image), tabs and background image blocks.


Consider using a grid to:


    

  • organize body text and non-text content on a page

  • create visual hierarchy and prominence of information

  • shorten scrolling and the overall length of your page on desktop screens

  • design unique and blended layouts by combining various column widths per row




    






                
                    





    
    
    


Usage examples:


    

  • creating different column widths within your content
    


  • placing non-text items next to corresponding text

  • resize different elements so they fill the space more equally




    






                
            

        

    
    
    




    
    
    







	

		Grid variations and features
		
			
				

					Variation name
				
					Unique features
				

			
		
		
		
			

				Simple
				
				
				
				
			
				
				
				
					
					
  • can be set to fill 100% container width
  • can max out at 1200px width on larger screens

						
				
				
			

		
			

				Advanced
				
				
				
				
			
				
				
				
					
					
  • gives extra control over page layouts
  • gives option to determine how column(s) or combination of columns behave at 3 middle breakpoints

						
				
				
			

		
			

				Single narrow
				
				
				
				
			
				
				
				
					
					
  • width is set to a fixed percentage of the size of a content area
  • on large screens it displays as a narrow column with extra padding on either side
  • on screens smaller than 768px, it goes full width

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Ensure content is easily scannable with sufficient spacing inbetween elements.



    





Choose an appropriate amount of columns so users are not overwhelmed by the amount of information in a single row.



    





Use whole numbers to set up the column sizes i.e. 4  vs. 4.5.



    



    







    
    
    



                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not nest more than three grids within each other. This can have unintended consequences as columns break across different breakpoints.



    





Do not use too many different column sizes on one page. This can be visually confusing for users.