Building Responsive Layouts with CSS Grid

CSS Grid has revolutionized how we build layouts for the web. Learn how to create complex, responsive designs with this powerful layout system.

Grid Fundamentals

Create a basic grid layout with minimal code:

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

Key Grid Properties

• grid-template-columns
• grid-template-rows
• grid-gap
• grid-template-areas

Advanced Grid Techniques

Create responsive layouts without media queries:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 2rem;
}

.card {
  grid-column: span 1;
  /* Span 2 columns for featured items */
  &.featured {
    grid-column: span 2;
  }
}

Grid Areas

Define complex layouts using named grid areas:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}