Como criar: layout de colunas mistas
- Página anterior Vista de grade de lista
- Próxima página Cartão de coluna
Aprenda a usar CSS para criar uma grade de layout de colunas mistas.
Aprenda a criar um layout de colunas responsivas que podem mudar entre quatro colunas, duas colunas e colunas de largura total com base na largura da tela.
Ajuste o tamanho da janela do navegador para ver o efeito responsivo:
Como criar um layout de colunas mistas
Primeiro passo - Adicione HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
Segundo passo - Adicione CSS:
Neste exemplo, criaremos um layout de quatro colunas, que se transforma em duas colunas quando a largura da tela for menor que 900 pixels. No entanto, quando a largura da tela for menor que 600 pixels, as colunas empilhadas em vez de lado a lado.
/* Cria quatro colunas iguais, que flutuam juntas */
.column {
float: left;
width: 25%;
}
/* Limpa a flutuação */
.row:after {
content: "";
display: table;
clear: both;
}
/* Layout responsivo - muda a configuração para duas colunas em vez de quatro */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Layout responsivo - faz duas colunas empilhadas em vez de lado a lado */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Páginas relacionadas
Tutorial:Layout de site CSS
Tutorial:Design de site responsivo CSS
- Página anterior Vista de grade de lista
- Próxima página Cartão de coluna
