Sin consultas de medios: lograr un diseño fluido de escritorio de 3 columnas a un diseño móvil de 1 columna

Las consultas de medios tradicionales desempeñan un papel crucial en la adaptación diseños de sitios web para varios tamaños de pantalla. Sin embargo, en la búsqueda de crear un diseño verdaderamente fluido y responsivo, existe el deseo de explorar soluciones alternativas que eliminen la necesidad de consultas de medios.

Considere un sitio web con un diseño de 3 columnas en computadoras de escritorio:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

Sin embargo, en dispositivos móviles, el diseño debería transformarse en una sola columna:

|
---|
| 1 |
| 2 |
| 3 |

Para lograr esto dinámicamente, las potentes funciones de CSS vienen al rescate:

Grid and Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

La función repetir() crea un número específico de columnas y abrazadera() garantiza un mínimo de 1 columna cuando la ventana gráfica se reduce por debajo de 500 px.

Flexbox y margen negativo

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Este enfoque garantiza que los elementos se alineen uno al lado del otro en pantallas más grandes pero se apilen verticalmente en las más estrechas. Inicialmente, el margen negativo crea una superposición, que se corrige eliminándola en pantallas más pequeñas.

Conclusión

Al aprovechar la cuadrícula, la abrazadera, la caja flexible y los márgenes negativos, es posible para crear diseños fluidos que se adapten perfectamente entre varias columnas y una sola columna, eliminando la necesidad de consultas de medios para cambios básicos de diseño.