Modern Layouts with CSS Grid

CSS Grid has revolutionized how we create web layouts, providing a powerful two-dimensional system for building complex, responsive designs. This guide covers everything from basics to advanced patterns with practical examples.

1. Grid Fundamentals

Basic Grid Setup

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 4px;
}

Common Grid Properties

.grid-container {
  display: grid;
  /* Fixed-width columns */
  grid-template-columns: 200px 1fr 200px;
  
  /* Using auto-fit for responsive columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  /* Defining rows */
  grid-template-rows: auto 1fr auto;
  
  /* Grid gaps */
  gap: 20px;
  row-gap: 20px;
  column-gap: 20px;
  
  /* Alignment */
  justify-items: center;
  align-items: center;
}

2. Grid Areas and Template Areas

Grid areas provide a visual way to define layouts:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
}

.header { 
  grid-area: header;
  background: #2196F3;
  padding: 20px;
}

.sidebar { 
  grid-area: sidebar;
  background: #8BC34A;
  padding: 20px;
}

.main { 
  grid-area: main;
  background: #F5F5F5;
  padding: 20px;
}

.footer { 
  grid-area: footer;
  background: #607D8B;
  padding: 20px;
}

/* Responsive layout */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

3. Advanced Grid Patterns

Magazine Layout

.magazine-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
  padding: 20px;
}

.featured-article {
  grid-column: span 2;
  grid-row: span 2;
}

.article {
  grid-column: span 1;
  grid-row: span 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .magazine-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .featured-article {
    grid-column: span 2;
    grid-row: span 1;
  }
}

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 15px;
  padding: 20px;
}

.widget-full {
  grid-column: span 12;
}

.widget-half {
  grid-column: span 6;
}

.widget-third {
  grid-column: span 4;
}

.widget-quarter {
  grid-column: span 3;
}

@media (max-width: 1024px) {
  .widget-third,
  .widget-quarter {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .widget-half,
  .widget-third,
  .widget-quarter {
    grid-column: span 12;
  }
}

4. Grid Alignment and Positioning

Item Alignment

.grid-alignment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  
  /* Grid-level alignment */
  justify-items: center;     /* horizontal alignment */
  align-items: center;       /* vertical alignment */
  
  /* Container alignment */
  justify-content: center;   /* horizontal alignment */
  align-content: center;     /* vertical alignment */
}

/* Individual item alignment */
.item {
  justify-self: center;      /* horizontal alignment */
  align-self: center;        /* vertical alignment */
}

Dense Grid Packing

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  grid-auto-flow: dense;    /* Fills in gaps with smaller items */
}

.photo-wide {
  grid-column: span 2;
}

.photo-tall {
  grid-row: span 2;
}

.photo-large {
  grid-column: span 2;
  grid-row: span 2;
}

5. Responsive Grid Patterns

Card Grid with Minimum Width

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

/* Ensure cards don't get too wide on large screens */
@media (min-width: 1400px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
  }
}

Holy Grail Layout with Grid

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .holy-grail {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

6. Advanced Grid Techniques

Masonry-like Layout

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 20px;
  gap: 20px;
}

.masonry-item {
  grid-row-end: span var(--span);
  background: #f0f0f0;
}

/* JavaScript required to calculate and set --span based on content height */
const resizeGridItem = (item) => {
  const rowHeight = 20;
  const rowSpan = Math.ceil(item.getBoundingClientRect().height / rowHeight);
  item.style.setProperty('--span', rowSpan);
};

Grid with Named Lines

.portfolio {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end content-start] 1fr 
    [content-end];
  grid-template-rows: 
    [header-start] auto 
    [header-end content-start] 1fr 
    [content-end footer-start] auto 
    [footer-end];
  min-height: 100vh;
  gap: 20px;
}

.portfolio-header {
  grid-column: sidebar-start / content-end;
  grid-row: header-start / header-end;
}

.portfolio-sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: content-start / content-end;
}

Best Practices and Tips

Start Mobile-First: Design your grid layouts for mobile devices first, then enhance them for larger screens using media queries.
Use Modern Units:
- fr units for flexible columns
- minmax() for responsive sizing
- auto-fit/auto-fill for automatic grid items
Performance Considerations:
- Avoid nesting grids deeply
- Use will-change: transform for animations
- Consider using contain: layout for large grids
Accessibility:
- Ensure logical source order in HTML
- Use appropriate semantic markup
- Test keyboard navigation
Browser Support:
- CSS Grid is supported in all modern browsers
- Use @supports for progressive enhancement
- Consider fallbacks for legacy browsers

/* Progressive enhancement example */
.container {
  display: flex;
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
}

Contents