css - usar - using grid and flexbox together




Um layout de grade com quadrados responsivos (2)

O truque de padding-bottom é o mais usado para conseguir isso.

Você pode combiná-lo com Flexbox e CSS Grid, e como usar porcentagem para margem / preenchimento dá resultado inconsistente para itens flex / grid, pode-se adicionar um wrapper extra, ou como aqui, usando um pseudo, então o elemento com percentual não é o item flex / grid.

Edit: Note, há uma atualização feita para as especificações. , que agora deve dar resultado consistente quando usado em itens flexíveis / de grade. Esteja ciente, porém, o problema ainda ocorre em versões mais antigas.

Observe que, se você adicionar conteúdo ao elemento de content , ele precisará ser a posição absoluta para manter a proporção do quadrado.

Fiddle demo - Flexbox

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Versão da grade CSS

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 10px;
}

.square {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Eu estou querendo criar um layout de grade com quadrados responsivos.

Eu sinto que eu deveria ser capaz de fazer isso com o layout CSS Grid, mas tendo problemas para definir a altura de cada quadrado para ser igual à largura.

Também tendo problemas para definir uma calha entre cada quadrado.

Eu estaria melhor usando o flexbox?

Atualmente meu HTML se parece com isso, mas será dinâmico para que mais quadrados possam ser adicionados. E é claro que ele precisa ser responsivo, então, o ideal é usar uma consulta de mídia para reduzi-lo a uma coluna.

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Usando grade css, isso é tanto quanto eu tenho

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

Consegui ir um pouco mais longe com o flexbox e usar o espaço entre eles para alinhar os quadrados com uma boa calha, mas ainda estava lutando para que a altura correspondesse à largura de cada quadrado.

Não consegui encontrar nenhum exemplo disso sendo feito com flexbox ou grid, mas qualquer exemplo também seria apreciado.

obrigado


Tente usar as unidades de porcentagem da viewport .

jsFiddle

.square-container {
  display: grid;
  grid-template-columns: repeat(3, 30vw);
  grid-template-rows: 30vw;
  grid-gap: 2.5vw;
  padding: 2.5vw;
  background-color: gray;
}

.square {
  background-color: lightgreen;
}

body {
  margin: 0; /* remove default margins */
}
<div class="square-container">
  <div class="square">
    <div class="content"></div>
  </div>
  <div class="square">
    <div class="content spread"></div>
  </div>
  <div class="square">
    <div class="content column"></div>
  </div>
</div>

A partir da especificação:

5.1.2. Comprimentos da porcentagem de viewport: as unidades vw , vh , vmin , vmax

Os comprimentos da porcentagem de viewport são relativos ao tamanho do bloco inicial contendo. Quando a altura ou a largura do bloco inicial é alterada, elas são dimensionadas de acordo.

  • vw unit - Igual a 1% da largura do bloco inicial.
  • unidade vh - Igual a 1% da altura do bloco inicial contendo.
  • vmin unit - Igual ao menor de vw ou vh .
  • vmax unit - Igual ao maior de vw ou vh .




css-grid