WDD 130 | S04 - Atividades de Aprendizagem: Layouts do CSS

S04 Atividades de Aprendizagem: Utilizando Layouts do CSS

Visão Geral

Dominar CSS Flex e Grid pode ser desafiador. Esta atividade destaca alguns dos layouts mais relevantes e os princípios por trás deles.

Acesse as páginas do MDN sobre HTML e CSS, para obter informações mais detalhadas sobre qualquer tópico dessa aula, e sempre que precisar, procure seu instrutor para esclarecer suas dúvidas.

Preparação

Quando devo usar CSS Flex e CSS Grid?

Dependendo do layout desejado, muitas vezes você pode fazer qualquer método funcionar. Você pode até usá-los juntos, como usar o flex para alinhar itens dentro de um item de grade.

Escolha Flex

Layouts simples: O CSS Flex é ideal para layouts unidimensionais, como navegação, ou qualquer grupo de itens que precisam ser mostrados lado a lado ou um em cima do outro.
Alinhamento: O Flex é ótimo para alinhar itens horizontal ou verticalmente.
Conteúdo dinâmico: O Flex geralmente é ideal para layouts com conteúdo dinâmico, em que os tamanhos dos itens podem variar.

Escolha Grid

Layouts complexos: O CSS Grid é geralmente mais robusto, permitindo que você crie layouts bidimensionais para estruturas comuns, como tabelas, calendários, células mescladas e muito mais.
Layouts de largura fixa: A grade é adequada para layouts de largura fixa, em que os tamanhos dos itens são conhecidos.
Sobreposição e camadas: Grid é compatível com sobreposição e disposição de itens em camadas.

Métodos Comuns de Layout

A seguir, apresentamos algumas tarefas comuns de layout que podem ser facilmente concluídas com Flex e Grid.

Alinhamento de Itens em uma Coluna

Para alinhar itens em uma coluna, você pode usar Flex e definir flex-direction: column; (row é padrão).

display: flex;
flex-direction: column;

Centralização Vertical e Horizontal

O código a seguir centraliza o item filho horizontal e verticalmente usando CSS Grid. Naturalmente, esse código é aplicado ao contêiner pai da grade.

display: grid;
place-items: center;

A centralização também pode ser controlada com o seguinte código para Flex e Grid:

display: flex; /* ou grid */
justify-content: center;
align-items: center;

Instruções da Atividade

Na pasta semana04, abra os arquivos exercicios-layout.html e exercicios-layout.css na subpasta estilos da semana04.
Utilize o Live/Five Server para abrir o arquivo no navegador.
Conclua os três exercícios presentes no arquivo. As imagens a seguir mostram o resultado esperado da solução:

Avalie Seu Conhecimento

Tente resolver os exercícios por conta própria antes de consultar este exemplo de solução.

.flex {
  background-color: #aba;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  background-color: #abb;
  display: grid;
  place-items: center;
}

* Tanto place-items quanto align-items/justify-content podem ser usados para o exercício.

.conteiner2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.conteiner3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* ou grid-template-columns: repeat(3, 1fr); */
}
              
.colunas-3 {
  grid-column: 1/4; /* ou grid-column: span 3; */
}

Existe também um arquivo de solução chamado solucao-exercicios-layout.html e o arquivo CSS correspondente chamado solucao-exercicios-layout.css na pasta semana04.