How to Create a Fluid Grid Layout with 3-Column Desktop and 1-Column Mobile Without Media Queries?

Achieving 3-Column Desktop and 1-Column Mobile Layout Without Media Queries

Problem:
How can we create a fluid grid layout that switches from a 3-column desktop layout to a 1-column mobile layout without relying on media queries?

Solution:
CSS allows for dynamic layout adjustments without relying on media queries. Here's how:

1. Utilizing Clamp() and Flex:
In your initial CSS, you employed clamp() in the grid-template-columns property to switch from repeat(3) to repeat(1) based on screen size. However, clamp() alone doesn't provide the desired result. Instead, we can use clamp() within the flex-basis property of flex items to create wrapping behavior:

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

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

2. Adjust the Formula According to Screen Size:
In this code, 400px represents the screen size at which the layout should switch from 3 columns to 1 column. You can adjust this value based on your desired breakpoint. For instance, to switch at 500px, replace 400px with 500px.

3. Calculation Explanation:
The formula max(0px, (400px - 100vw) * 1000) ensures that the flex-basis of each item remains at 0px when the viewport width is greater than 400px. This keeps them side-by-side in a 3-column layout. However, when the viewport width decreases below 400px, the flex-basis becomes a large value, effectively pushing the items onto separate lines, resulting in a 1-column layout.

By utilizing clamp() in this manner, you can achieve a fluid and responsive layout that adapts to different screen sizes without the need for media queries.

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