🎨CSS & Color

12-Column Responsive Grid

The industry standard layout system using CSS Grid.

Explanation

A 12-column grid is divisible by 2, 3, 4, and 6, making it extremely flexible for layouts.

Examples

Grid Config

Output

grid-template-columns: repeat(12, 1fr)

Code Examples

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(12, 1fr);
  }
  .main-content { grid-column: span 8; }
  .sidebar { grid-column: span 4; }
}

Try it Now

Open in Grid Generator

💡 Tips

Use fractional units (fr) for flexible column widths
gap handles gutters perfectly without margin hacks
Use grid-column: span X to define width

⚠️ Common Pitfalls

Over-relying on grid for simple layouts where Flexbox might be easier