Como fazer - Layout de coluna mista
Saiba como criar uma grade de layout de coluna mista com CSS.
Saiba como criar um layout de coluna responsivo que varia entre 4 colunas, 2 colunas e colunas de largura total, dependendo da largura da tela.
Redimensione a janela do navegador para ver o efeito responsivo:
Como criar um layout de coluna mista
Etapa 1) Adicionar HTML:
Exemplo
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Etapa 2) Adicionar CSS:
Neste exemplo, criaremos um layout de quatro colunas que se transformará em duas colunas em telas com menos de 900px de largura. No entanto, em telas com menos de 600 px de largura, as colunas serão empilhadas umas sobre as outras em vez de flutuar uma ao lado da outra.
Exemplo
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Dica: Acesse nosso Tutorial de layout de site CSS para saber mais sobre layouts de site.
Dica: Acesse nosso Tutorial de Web Design Responsivo de CSS para saber mais sobre design de Web responsivo e grades.