Mastering Flexible Layouts: CSS Flexbox VS Grid for Responsive Design

This post explores various methods for creating a responsive, horizontally distributed list of cards using CSS Flexbox and Grid. We'll tackle the challenge of maintaining consistent card size and spacing across different screen sizes.

Table of Contents

• Table of Contents
• The Challenge
• CSS Flexbox: A Flexible Card List
• Even Card Distribution with flex-grow and flex-basis
• CSS Grid: A Responsive Solution
• Summary

The Challenge

Gallery or list components often require cards (articles, products, images) to adapt to the container's width. Each card should resize proportionally, maintaining equal height, width, and spacing. The layout should seamlessly reflow across various screen sizes.

A basic HTML structure and minimal CSS might initially produce uneven card distribution:

CSS Flexbox: A Flexible Card List

Flexbox offers a straightforward approach. flex-wrap: wrap enables wrapping to new rows, and gap controls spacing:

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

This yields a horizontal flow:

However, setting a fixed width for .item (width: 100px;) prevents cards from expanding to fill available space, leaving gaps:

Using justify-content properties (like space-between, space-around, etc.) doesn't perfectly solve the even distribution problem:

Even Card Distribution with flex-grow and flex-basis

flex-basis sets the initial card size, while flex-grow: 1 (or flex: 1) allows proportional growth:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

This improves distribution, but the last card might still expand unevenly:

CSS Grid: A Responsive Solution

CSS Grid provides a more robust solution. display: grid and gap are used similarly to Flexbox:

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

For responsiveness, grid-template-columns with auto-fit, minmax(), and repeat() is key:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

This creates a fully responsive layout:

Summary

Both Flexbox and Grid offer powerful layout capabilities. Flexbox excels in one-dimensional layouts, while Grid shines for two-dimensional control. Choosing the right tool depends on the specific design requirements.

Happy coding! ?

? Learn about Vue 3 and TypeScript with my new book Learning Vue!

? Connect with me on X | LinkedIn.

Like this post? Share it! ?? ?

The above is the detailed content of Mastering Flexible Layouts: CSS Flexbox VS Grid for Responsive Design. For more information, please follow other related articles on the PHP Chinese website!