How to Achieve a 3 Column Desktop to 1 Column Mobile Layout Without Media Queries?

Achieving 3 Column Desktop to 1 Column Mobile Layout Without Media Queries

Creating flexible layouts that adapt to different screen sizes is a common web design challenge. While media queries are a reliable solution, they can introduce unnecessary breakpoints in the layout. This article explores an alternative approach to achieving a 3 column desktop to 1 column mobile layout without resorting to media queries.

Problem:

Often, websites desire a 3-column layout on desktop, transitioning to a single-column layout on mobile devices. However, during the transition from multiple columns to a single-column layout, an intermediate stage occurs where columns become narrow and distorted. Attempts to utilize clamp(), minmax(), and other functions often yield unsatisfactory results.

Solution:

The proposed solution utilizes flex-basis with a formula that effectively creates a breakpoint without a media query. The formula is:

max(0px, (target-screen-size - 100vw)*1000)

For instance, to create a breakpoint at a screen size of 400px:

max(0px, (400px - 100vw)*1000)

If the screen is wider than 400px, the formula will return 0px, ensuring the columns are not affected. Otherwise, it will return a large value, effectively forcing a line break and creating a single-column layout.

Implementation:

Apply the formula to the flex-basis of the container's children:

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div {
  height: 100px;
  border: 2px solid;
  background: red;
  flex-basis: max(0px, (400px - 100vw) * 1000);
  flex-grow: 1;
}

This approach removes the need for explicit media queries while providing a smoother transition between column layouts.

The above is the detailed content of How to Achieve a 3 Column Desktop to 1 Column Mobile Layout Without Media Queries?. For more information, please follow other related articles on the PHP Chinese website!