Skip to main content
adicionou 534 caracteres ao conteúdo
Fonte Link
Costamilam
  • 10mil
  • 7
  • 42
  • 105

Se você souber a largura do container na unidade de medida vw, basta usar esse valor dividido por 4 nos filhos, por exemplo, se o container sempre for do tamanho máximo da tela, uma solução é usar a medidaaltura será de 25vw, se o container for de 80% da tela (ou 80 vw), a altura será de 20vw, etc

Isso porque o valor usado pelo vw é o mesmo independentemente se usado na altura ou largura, assim como o vwvh noe o heightvmin:

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div.row {
  width: 25vw;80vw;
  display: block;
  margin: 0 10vw;
  padding: 0;
}
div.col {
  width: 20vw; /* ou 25% */
  height: 25vw;20vw; /* ou calc(80vw / 4) */
  display: block;
  float: left;
  background-color: darkblue;
  margin: 0;
  padding: 0;
  border: 1px solid darkred;
  box-sizing: border-box;
}
<div><<div class="row">
  <div class="col"></div>
<div><  <div class="col"></div>
<div><  <div class="col"></div>
<div><  <div class="col"></div>
</div>

Se o container sempre for do tamanho máximo da tela, uma solução é usar a medida vw no height:

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div {
  width: 25vw;
  height: 25vw;
  display: block;
  float: left;
  background-color: darkblue;
  margin: 0;
  padding: 0;
  border: 1px solid darkred;
  box-sizing: border-box;
}
<div></div>
<div></div>
<div></div>
<div></div>

Se você souber a largura do container na unidade de medida vw, basta usar esse valor dividido por 4 nos filhos, por exemplo, se o container for do tamanho máximo da tela, a altura será de 25vw, se o container for de 80% da tela (ou 80 vw), a altura será de 20vw, etc

Isso porque o valor usado pelo vw é o mesmo independentemente se usado na altura ou largura, assim como o vh e o vmin

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div.row {
  width: 80vw;
  display: block;
  margin: 0 10vw;
  padding: 0;
}
div.col {
  width: 20vw; /* ou 25% */
  height: 20vw; /* ou calc(80vw / 4) */
  display: block;
  float: left;
  background-color: darkblue;
  margin: 0;
  padding: 0;
  border: 1px solid darkred;
  box-sizing: border-box;
}
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Fim da Recompensa com 500 pontos de reputação concedidos por Io-ol
Fonte Link
Costamilam
  • 10mil
  • 7
  • 42
  • 105

Se o container sempre for do tamanho máximo da tela, uma solução é usar a medida vw no height:

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div {
  width: 25vw;
  height: 25vw;
  display: block;
  float: left;
  background-color: darkblue;
  margin: 0;
  padding: 0;
  border: 1px solid darkred;
  box-sizing: border-box;
}
<div></div>
<div></div>
<div></div>
<div></div>