CSS 12 Column Grid Examples

• Grid Examples
• Grid Tutorial

These 12 column grids can be used as a basis for a website layout or other purpose.

• Basic example

  • Preview example
  • Get code

  

• Basic example - Responsive

  Same as above, but adds a media query to cater for small devices.

  • Preview example
  • Get code

  

• Basic example - Mobile First

  This example uses a media query to cater for large devices.

  • Preview example
  • Get code

  

• Vertical grid

  This example flips the grid on its side and uses column spans instead of row spans.

  • Preview example
  • Get code

  

• Vertical grid - Responsive

  Same as above, but adds a media query to cater for small devices.

  • Preview example
  • Get code

  

• Vertical grid - Mobile first

  Uses a media query to cater for large devices.

  • Preview example
  • Get code

  

• 12 column grid - Example 2

  • Preview example
  • Get code

  

• Example 2 - Responsive

  Same as above, but adds a media query to cater for small devices.

  • Preview example
  • Get code

  

• Example 2 - Mobile first

  Uses a media query to cater for large devices.

  • Preview example
  • Get code

  

• Grid Examples
• Grid Tutorial