Advanced Responsive Web Design Techniques

CSS Grid and Flexbox for Responsive Layouts

CSS Grid and Flexbox are powerful tools for creating responsive layouts that can adapt to any screen size. Combining these layout systems with media queries allows you to build complex, dynamic layouts that respond to device changes.

Example: Responsive Layout with CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid columns */
  gap: 20px;
}

In this example, the grid will create as many columns as can fit in the available space, with a minimum width of 200px per column.

Example: Responsive Layout with Flexbox

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex-basis: 30%;
  margin: 10px;
}

@media (max-width: 600px) {
  .item {
    flex-basis: 100%;
  }
}

In this example:

On larger screens, the items are arranged in a multi-column layout.
On smaller screens, the items stack vertically, taking up the full width.