Como criar: layout de quatro colunas

Como criar um layout de quatro colunas

Primeiro passo - Adicionar HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Segundo passo - Adicionar CSS:

Neste exemplo, criaremos um layout de quatro colunas:

Exemplo

.column {
  float: left;
  width: 25%;
}
/* Remover flutuação após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Experimente pessoalmente

Neste exemplo, criaremos umResponsivoLayout de quatro colunas:

Exemplo

/* Layout responsivo - Quando a largura da tela for menor que 600px, os três colunas se empilharam, em vez de estar ao lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Layout de site CSS

Tutorial:Design de site responsivo CSS