Como construir layouts de alvenaria sem costura com CSS Grid e ajuste de objeto: capa

Como você pode ver, apenas para tornar o layout um pouco mais distinto, uma das imagens (a nona) ficará em sua própria linha e será duas vezes maior que as outras.

Em telas com pelo menos 850px, nossas imagens ficarão dentro de um layout de alvenaria como este:

O verdadeiro poder do CSS Grid é que ele nos dá a capacidade de modificar o layout acima com apenas algumas modificações de estilo. Por exemplo, aqui está outra versão dele:

No passado, para construir esses tipos de layouts, os desenvolvedores precisavam usar uma biblioteca JavaScript como Maçonaria.js.

2. Definir a marcação HTML

Para desenvolver essa grade, tudo o que precisamos é de uma lista não ordenada. Cada imagem ficará dentro de um item de lista.

Aqui está a estrutura necessária:

Considere como essa marcação é limpa. CSS Grid é ideal para esses tipos de layouts. Se você tentar construí-lo com outro método de layout como flexbox, você terá que inserir elementos aninhados. E o mais importante, outras soluções simplesmente não são flexíveis o suficiente. Para atualizar o layout, você precisará reestruturar a marcação e não apenas modificar os estilos.

3. Especifique os estilos principais

A melhor maneira de se familiarizar com nossos estilos relacionados à grade é inspecionando o console do navegador, direcionando a lista não ordenada e verificando as linhas e colunas usando um inspetor de grade.

Aqui estão as coisas notáveis ​​sobre nossos estilos:

• A lista será nosso contêiner de grade.
• Em telas pequenas (<850px), como dissemos anteriormente, teremos um layout de duas colunas. Especificaremos o tamanho das colunas por meio do grid-template-columns propriedade enquanto usaremos o grid-auto-rows propriedade para definir o tamanho das linhas criadas implicitamente.
• Em telas grandes (≥850px), teremos um layout de cinco colunas. Novamente, aqui, não criaremos linhas explicitamente por meio do grid-template-rows mas continue dimensionando as linhas por meio do grid-auto-rows propriedade.
• Para posicionar e dimensionar as colunas no layout desktop e a nona coluna no mobile, usaremos o grid-row e grid-column propriedades.
• Nós vamos usar o object-fit: cover valor da propriedade para colocar as imagens dentro de sua coluna. Dessa forma, as imagens se encaixarão perfeitamente dentro de seu contêiner sem perder sua proporção.

O que é ajuste ao objeto: capa?

Esse último ponto é muito importante. Sem object-fit: cover nossas imagens serão forçadas a se ajustarem às dimensões das células da grade, assim:

Mas com object-fit podemos definir como a imagem é tratada. Com o cover valor, cada imagem será cortada para que mantenha sua proporção, enquanto sua menor dimensão (altura ou largura) se encaixa perfeitamente no contêiner. Será cobrir o espaço disponível.

Estilos finais

Com isso dito, aqui estão todos os estilos de layout de alvenaria:

.grid {  
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 30vw;
  list-style: none;
}

.grid li:nth-child(9) {
  grid-column: 1 / -1;
  grid-row: span 2;
}

.grid figure,
.grid img {
  width: 100%;
  height: 100%;
}

.grid img {
  object-fit: cover;
  background: #f5f3f4;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

@media (min-width: 850px) {
  .grid {
    grid-gap: 24px;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 12vw;
  }

  .grid li:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .grid li:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }

  .grid li:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }

  .grid li:nth-child(4) {
    grid-column: 5;
    grid-row: 1;
  }

  .grid li:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
  }

  .grid li:nth-child(6) {
    grid-column: 5;
    grid-row: 2 / span 2;
  }

  .grid li:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }

  .grid li:nth-child(8) {
    grid-column: 1;
    grid-row: 3;
  }

  .grid li:nth-child(9) {
    grid-column: 3 / span 2;
    grid-row: 3 / span 2;
  }

  .grid li:nth-child(10) {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

  .grid li:nth-child(11) {
    grid-column: 5;
    grid-row: 4;
  }
}

Isso nos dará o seguinte resultado:

4. Padrões dinâmicos

Ótimo trabalho até agora, pessoal! Conseguimos criar um layout de alvenaria atraente, repleto de imagens. Mas podemos ir um pouco mais longe e automatizar as coisas. O objetivo é fazer com que esse layout fique ótimo com mais fotos do Unsplash (33) como esta:

Com isso em mente, precisamos fazer três coisas:

• Identifique cada item dentro dos blocos de imagem (três blocos de 11) por meio de uma variável CSS inline (n). Usaremos essa variável para colocá-la na linha da direita.
• Use o :nth-child() Pseudoclasse CSS para criar padrões que selecionarão dinamicamente novos itens à medida que forem adicionados à grade.
• Automatize a localização dos itens dentro de uma linha de grade pegando seus n Variável CSS.

Ao colocar tudo isso no lugar, estamos levando a essa grade totalmente dinâmica:

Tire algum tempo para ver o que está acontecendo aqui. Novamente, a melhor maneira de entender isso é usando as ferramentas do seu navegador para examinar o posicionamento de cada item dentro da grade!

Conclusão

Mais um exercício chegou ao fim, pessoal! Obrigado por acompanhar. Felizmente, você aprendeu uma ou duas coisas novas sobre como criar galerias de imagens criativas com nada além de CSS.

Você pode estender essa ideia usando-a não apenas para galerias, mas também para listas de postagens e ter um botão Load More para revelar diferentes grupos de elementos através do AJAX, ou talvez combinando esse layout com rolagem infinita: