uma para o autor, e talvez até mesmo um

para mais algumas informações.

Noções básicas de layout de grade CSS

Agora vamos iniciar alguns estilos organizando cada um desses itens em uma grade.

Observação: se esta é sua primeira incursão em “Grid”, você pode querer se atualizar lendo os tutoriais iniciais em Understanding CSS Grid Layout.

Nós iremos primeiro para dispositivos móveis aqui, então os primeiros estilos darão ao nosso wrapper uma largura e o centralizaremos, então defina algumas regras de Grid:

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

Mais importante, aqui estamos afirmando que nosso .band vai ser display: grid;. Declaramos então grid-template-columns do 1fr, que diz que cada coluna ocupará uma única fração das disponíveis. Declaramos apenas um por enquanto, então cada coluna preencherá toda a largura.

Então declaramos grid-template-rows: auto;. Este é, na verdade, o valor padrão, então poderíamos tê-lo omitido e significa que as alturas das linhas serão determinadas puramente pelo conteúdo.

Por último definimos um grid-gap do 20pxque nos dá nossas calhas de coluna e linha.

Media Query Número Uno

Em viewports mais amplas (500px é completamente arbitrário), alteraremos o grid-template-columns para nos dar duas cartas possíveis por linha. Agora há duas colunas, cada uma sendo uma das duas frações disponíveis.

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }  
}

Media Query Número Dos

Por fim, para telas maiores, usaremos um layout de quatro colunas.

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Aqui poderíamos igualmente ter escrito repeat(4, 1fr) ao invés de 1fr 1fr 1fr 1fr. Para obter mais informações sobre como o fr unit funciona, confira CSS Grid Layout: Fluid Columns and Better Gutters.

Então, o que isso nos deu?

Estilizando os cartões

Isso nos deu um layout de grade bastante sólido e, se você é fã de brutalismo, pode querer manter as coisas assim, mas para todos os outros, vamos fazer nossas cartas parecerem um pouco mais com cartas.

Começaremos com isso:

.card {
  background: white;
  text-decoration: none;
  color: #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

Isso nos dá alguns estilos básicos: um fundo branco, sem sublinhado para o texto, uma cor cinza e um box-shadow para nos dar alguma profundidade.

Em seguida, declaramos que o cartão é display: flex;. Isso é importante – estaremos alinhando o conteúdo do cartão verticalmente, usando o Flexbox. Por isso também afirmamos flex-direction: column; para nos dar o nosso eixo vertical. Por último declaramos min-height: 100%; para que todos os cartões preencham a altura do pai (nosso item de grade). Bom trabalho! Isso nos dá isso:

Estado de foco

Vamos fazer algumas outras melhorias antes de nos aprofundarmos no Flexbox. Adicionar um position: relative; e um transition para que possamos mover o cartão em foco:

  position: relative;
  top: 0;
  transition: all .1s ease-in;

Em seguida, ao passar o mouse, levante o cartão levemente e torne a sombra mais pronunciada:

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

Tipografia

Agora vamos adicionar alguns estilos gerais à tipografia para alterar as cores e o espaçamento.

.card article {
  padding: 20px;
}

/* typography */
.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

Aqui está o que você deve ter:

Miniaturas

Cada miniatura será aplicada como uma imagem de plano de fundo, então adicionaremos algumas marcações em geral, como esta:

Agora vamos ter certeza de .thumb divs tenham algumas dimensões, e que as imagens de fundo as preencham corretamente:

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

Bom trabalho, isso nos dá isso:

Artigo Flexbox

Agora queremos que o nome do autor seja alinhado na parte inferior do cartão, independentemente da quantidade de conteúdo acima dele. É aqui que entra novamente o Flexbox:

.card article {
  padding: 20px;
  flex: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Estamos usando a abreviação flex: 1; para declarar que este item flex (ainda é um filho do contêiner flex original) deve crescer para ocupar todo o espaço disponível.

Em seguida, declaramos que o artigo é um contêiner flexível por direito próprio e, novamente, declaramos flex-direction: column; para nos dar distribuição vertical. Por último, justify-content: space-between; afirma que todos os itens flexíveis dentro dele devem ser distribuídos uniformemente ao longo do eixo, com espaçamento igual entre eles.

Isso é ótimo, mas nos dá esses parágrafos estranhos e errantes no meio de nossos cartões.

Para alinhá-los corretamente, vamos adicionar flex-grow: 1; (ou simplesmente flex: 1;) a eles, para que preencham todo o espaço vertical restante, alinhando-se bem no topo.

.card p { 
  flex: 1; /* make p grow to fill available space*/
  line-height: 1.4;
}

Melhor!

Alterando a grade CSS

Neste ponto, estamos praticamente encerrados, mas a única coisa que o Grid nos permite fazer agora é alterar completamente o layout, colocando nossos itens de grade onde quisermos e em qualquer tamanho que quisermos. Para esta demonstração, queríamos fazer o primeiro cartão (vamos chamá-lo de nosso “cartão em destaque”) com duas colunas de largura para qualquer coisa que não fosse as menores viewports.

Em nossa primeira consulta de mídia, vamos fazer isso:

@media only screen and (min-width: 500px) {

    ...
    
  .item-1 {
    grid-column: 1/ span 2;
  }
  
}

Voltando ao nosso tutorial introdutório sobre áreas de grade, aqui estamos dizendo que, além de 500px, o primeiro item deve começar na linha de grade 1 e abranger duas trilhas. O restante dos itens da grade se encaixam automaticamente.

Dentro dessa mesma consulta de mídia, também bati o font-size do título em nosso cartão em destaque.

Conclusão

Este foi um tutorial sólido de CSS Grid e Flexbox; O Grid tratou do nosso layout principal bidimensional, depois o Flexbox tratou da distribuição vertical dos elementos dentro dos nossos cartões. Divirta-se brincando com ele!

Leitura adicional