Use CSS Grid and Flexbox to achieve efficient and responsive layout: 1. Use Grid to process two-dimensional page structure (such as header, sidebar, main content area); 2. Use Flexbox to process internal alignment of one-dimensional components (such as elements in card, navigation links); 3. Use Flexbox sub-items in the Grid container to achieve seamless collaboration between outer layout and inner layer alignment; 4. Use gap attributes to unify spacing, combined with media queries or minmax() to achieve responsiveness; 5. The mobile terminal can redefine the Grid area and hide the sidebar, and Flexbox automatically adjusts the content stream. This hierarchical collaboration method achieves maximum layout flexibility with minimal code, and ultimately builds a modern UI with clear structure and adaptability to multiple ends.

When building modern, responsive web layouts, CSS Grid and Flexbox are not competitors — they're comprehensive tools. Each excels in different scenarios, and combining them give you precise control over complex UIs. Here's how to use both effectively together.

? When to Use Grid vs. Flexbox

Before combining them, understand their strengths:

• CSS Grid is ideal for two-dimensional layouts (rows and columns). Use it for overall page structure — like headers, sidebars, main content, and footers.
• Flexbox shines in one-dimensional layouts (either row or column). Perfect for aligning items within a container, like navigation links, form controls, or card content.

Rule of thumb : Use Grid for layout , Flexbox for components .

? Example: Dashboard Layout

Let's build a common complex layout — a dashboard with:

• A header
• A sidebar
• Main content area with cards
• Cards that have aligned internal elements

1. Outer Structure with CSS Grid

 .dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-rows: 60px 1fr;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}

header {
  grid-area: header;
  background: #333;
}

.sidebar {
  grid-area: sidebar;
  background: #f0f0f0;
}

.main {
  grid-area: main;
  padding: 20px;
  overflow: auto;
}

This sets up the high-level structure. Clean, responsive, and easy to restore for mobile later.

2. Inner Card Layout with Flexbox

Now, inside .main , imagine a row of cards:

 <div class="main">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="avatar.jpg"  class="lazy" alt="Combining CSS Grid and Flexbox for Complex Layouts">
    <div class="card-content">
      <h3>Jane Doe</h3>
      <p>Frontend Developer</p>
    </div>
    <button>View</button>
  </div>
  <!-- More cards... -->
</div>

Use Flexbox to align content inside each card:

 .card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.card-content {
  flex: 1;
}

Flexbox handles the internal alignment perfectly — image on the left, text in the middle, button on the right, all vertically centered.

3. Card Grid with CSS Grid

Now, to lay out multiple cards in a responsive grid:

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

Yes — Grid inside a Grid ! The outer .dashboard uses grid for page layout, and .main uses grid again for responsive card arrangement. Each card uses Flexbox internally.

?? Best Practices for Combining Grid and Flexbox

• Layer responsibilities :
  • Grid: overall page or section layout
  • Flexbox: alignment within components
• Don't over-nest — only use what's necessary
• Responsive design : Use media queries or minmax() in Grid to adapt layout
• Use gap in both Grid and Flexbox (modern, clean spacing)

? Mobile Considerations

On small screens, reconfigure the dashboard:

 @media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "main";
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none; /* Or move to a hamburger menu */
  }
}

Meanwhile, the Flexbox-powered cards automatically stack horizontally or wrap if needed using flex-wrap .

? Summary

• Use CSS Grid for high-level, two-dimensional layouts (eg, page structure)
• Use Flexbox for one-dimensional alignment inside components (eg, card content, nav links)
• Combine them: Grid containers with Flexbox children
• This combo gives maximum flexibility with minimum code

Basically, Grid sets the stage, Flexbox directs the actors .

The above is the detailed content of Combining CSS Grid and Flexbox for Complex Layouts. For more information, please follow other related articles on the PHP Chinese website!