Sem consultas de mídia: alcançando um layout fluido de desktop de 3 colunas para celular de 1 coluna

As consultas de mídia tradicionais desempenham um papel crucial na adaptação layouts de sites para vários tamanhos de tela. No entanto, na busca por criar um design verdadeiramente fluido e responsivo, há o desejo de explorar soluções alternativas que eliminem a necessidade de consultas de mídia.

Considere um site com layout de 3 colunas em desktops:

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

No celular, porém, o layout deve se transformar em uma única coluna:

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

Para conseguir isso de forma dinâmica, os poderosos recursos do CSS vêm em socorro:

Grid and Clamp

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

A função repeat() cria um número especificado de colunas, e clamp() garante um mínimo de 1 coluna quando a janela de visualização diminui abaixo de 500px.

Flexbox e margem negativa

.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 */
   }
}

Essa abordagem garante que os itens sejam alinhados lado a lado em telas maiores, mas empilhados verticalmente em telas mais estreitas. A margem negativa inicialmente cria sobreposição, que é corrigida removendo-a em telas menores.

Conclusão

Aproveitando grade, braçadeira, flexbox e margens negativas, é possível para criar layouts fluidos que se adaptam perfeitamente entre várias colunas e uma única coluna, eliminando a necessidade de consultas de mídia para alterações básicas de layout.