Skip to main content
adicionou 94 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Nos exemplos abaixo foram usados img e div, mas a lógica serve para qualquer elemento.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML


Usando DIVs

Dependendo do efeito desejado, basta definir a largura das suas DIVs para 25%. Só cuidado com o box-model:

.quatro {
  width:25%;
  float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML


Usando DIVs

Dependendo do efeito desejado, basta definir a largura das suas DIVs para 25%. Só cuidado com o box-model:

.quatro {
  width:25%;
  float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Nos exemplos abaixo foram usados img e div, mas a lógica serve para qualquer elemento.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML


Usando DIVs

Dependendo do efeito desejado, basta definir a largura das suas DIVs para 25%. Só cuidado com o box-model:

.quatro {
  width:25%;
  float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>

adicionou 1373 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML


Usando DIVs

Dependendo do efeito desejado, basta definir a largura das suas DIVs para 25%. Só cuidado com o box-model:

.quatro {
  width:25%;
  float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML


Usando DIVs

Dependendo do efeito desejado, basta definir a largura das suas DIVs para 25%. Só cuidado com o box-model:

.quatro {
  width:25%;
  float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>

Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.

Usando nth-child

Sempre que precisar algo que aconteça a cada n ítens, pode usar o :nth-child (ou outros nth, conforme o contexto).

Veja um exemplo:

.quatro {
  display:block;
  float:left;
  margin:10px;
}
.quatro:nth-child(4n+1) {
  clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">

Para aprender mais:

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Fazer uma lista quadriculada HTML