Advanced CSS Grid and Flexbox Layouts

CSS Grid vs Flexbox

While both are powerful layout tools, they serve different purposes:

Feature	Grid	Flexbox
Dimensions	2D	1D
Use Case	Complex layouts	Linear layouts
Learning Curve	Medium	Easy

Flexbox Mastery

Basic Flex Container

.container {
  display: flex;
  flex-direction: row; /* row, column */
  justify-content: space-between; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  gap: 1rem; /* Space between items */
}

Flex Items

.item {
  flex: 1; /* Shorthand for flex-grow, flex-shrink, flex-basis */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.item-2 {
  flex: 2; /* Takes twice the space */
}

Real-World Example: Navigation Bar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-brand {
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-icons {
  display: flex;
  gap: 1rem;
  margin-left: auto;
}

CSS Grid Layouts

Basic Grid Setup

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  grid-auto-flow: dense;
}

Named Grid Areas

.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Responsive Grid

/* Mobile */
.grid {
  grid-template-columns: 1fr;
}

/* Tablet */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Auto-fit and Auto-fill

/* Auto-fit: collapses empty tracks */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Auto-fill: keeps empty tracks */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Advanced Techniques

CSS Subgrid

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

Layering with Grid

.card {
  display: grid;
  grid-template-areas: "overlay";
}

.card > * {
  grid-area: overlay;
}

Performance Tips

1. Use gap instead of margins - More performant
2. Avoid deep nesting - Simplify structure
3. Use grid-auto wisely - Can impact layout stability
4. Test on different browsers - CSS Grid has good support now

Conclusion

CSS Grid and Flexbox are essential tools for modern responsive design. Master these layouts and you'll be able to create virtually any design efficiently.