🔸 1. Introdução aos Layouts CSS Link to heading

📌 O que são Layouts CSS? Link to heading

Layouts CSS são técnicas usadas para organizar elementos em uma página web. Antigamente, usávamos float, inline-block ou até position para montar layouts — mas essas abordagens exigiam muitos ajustes manuais e não eram responsivas por padrão.

📌 Por que usar Flexbox e Grid? Link to heading

  • Flexbox trabalha em uma dimensão por vez (horizontal ou vertical).

  • Grid Layout lida com duas dimensões (linhas e colunas).

Esses dois modelos modernos tornam o desenvolvimento de layouts muito mais simples, responsivo e organizado.

📌 Quando usar cada um? Link to heading 

 1
 2| Situação                          | Flexbox ✅ | Grid ✅ |
 3
 4|----------------------------------|-----------|---------|
 5
 6| Alinhar itens em uma linha       | ✅        | ❌      |
 7
 8| Criar uma galeria de imagens     | ✅        | ✅      |
 9
10| Layout completo da página        | ❌        | ✅      |
11
12| Centralizar elementos            | ✅        | ✅      |

🔸 2. Guia Flexbox Link to heading

📌 display: flex Link to heading

Define o container como um flex container.

1
2.container {
3
4  display: flex;
5
6}

📌 flex-direction Link to heading

Define a direção que os itens flexíveis serão posicionados no container.

  • row (padrão): itens da esquerda para a direita.

  • row-reverse: itens da direita para a esquerda.

  • column: itens de cima para baixo.

  • column-reverse: itens de baixo para cima.

1
2.container {
3
4  display: flex;
5
6  flex-direction: row; /* ou row-reverse, column, column-reverse */
7
8}

💡 Exemplo prático: Link to heading 

 1
 2<div class="container">
 3
 4  <div class="item">A</div>
 5
 6  <div class="item">B</div>
 7
 8  <div class="item">C</div>
 9
10</div>
11
12  
13
14<style>
15
16.container {
17
18  display: flex;
19
20  flex-direction: column;
21
22  gap: 10px;
23
24  background: #f0f0f0;
25
26  padding: 10px;
27
28}
29
30.item {
31
32  background: lightgreen;
33
34  padding: 10px;
35
36}
37
38</style>

📌 justify-content Link to heading

Alinha os itens no eixo principal (horizontal por padrão).

1
2.container {
3
4  justify-content: space-between; /* flex-start | center | space-around */
5
6}

📌 align-items e align-content Link to heading

Alinha os itens no eixo cruzado (vertical por padrão).

1
2.container {
3
4  align-items: center;
5
6  align-content: stretch;
7
8}

📌 flex-wrap Link to heading

Permite que os itens quebrem linha.

1
2.container {
3
4  flex-wrap: wrap;
5
6}

📌 gap Link to heading

Espaçamento entre os itens.

1
2.container {
3
4  gap: 20px;
5
6}

📌 flex-grow, flex-shrink, flex-basis Link to heading

Controla o crescimento, encolhimento e tamanho base dos itens.

 1
 2.item {
 3
 4  flex-grow: 1;
 5
 6  flex-shrink: 1;
 7
 8  flex-basis: 200px;
 9
10}

📌 order Link to heading

Altera a ordem de exibição dos itens.

1
2.item {
3
4  order: 2;
5
6}

📌 align-self Link to heading

Alinha individualmente um item no eixo cruzado.

1
2.item {
3
4  align-self: flex-end;
5
6}

💡 Exemplo Prático Flexbox (Cards Responsivos) Link to heading 

 1
 2<div class="cards">
 3
 4  <div class="card">Card 1</div>
 5
 6  <div class="card">Card 2</div>
 7
 8  <div class="card">Card 3</div>
 9
10</div>
11
12  
13
14<style>
15
16.cards {
17
18  display: flex;
19
20  flex-wrap: wrap;
21
22  gap: 1rem;
23
24}
25
26.card {
27
28  background: lightblue;
29
30  padding: 20px;
31
32  flex: 1 1 200px;
33
34}
35
36</style>

🔸 3. Guia Grid Layout Link to heading

📌 display: grid Link to heading

Ativa o Grid Layout.

1
2.container {
3
4  display: grid;
5
6}

📌 grid-template-columns / rows Link to heading

Define as colunas e linhas do grid.

1
2.container {
3
4  grid-template-columns: 1fr 2fr;
5
6  grid-template-rows: auto auto;
7
8}

📌 gap, row-gap, column-gap Link to heading

Define os espaçamentos.

 1
 2.container {
 3
 4  gap: 10px;
 5
 6  row-gap: 20px;
 7
 8  column-gap: 10px;
 9
10}

📌 grid-column, grid-row, grid-area Link to heading

Define a posição dos itens no grid.

1
2.item {
3
4  grid-column: 1 / 3;
5
6  grid-row: 1 / 2;
7
8}

📌 grid-template-areas Link to heading

Define áreas nomeadas no grid.

 1
 2.container {
 3
 4  grid-template-areas:
 5
 6    "header header"
 7
 8    "menu content"
 9
10    "footer footer";
11
12}
13
14.header {
15
16  grid-area: header;
17
18}

📌 justify-items, align-items, place-items Link to heading

Alinhamento interno dos itens.

1
2.container {
3
4  justify-items: center;
5
6  align-items: center;
7
8}

📌 auto-fit, auto-fill, minmax() Link to heading

Técnicas para grids responsivos.

1
2.container {
3
4  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5
6}

💡 Exemplo Prático Grid (Cards Responsivos) Link to heading 

 1
 2<div class="grid">
 3
 4  <div class="card">1</div>
 5
 6  <div class="card">2</div>
 7
 8  <div class="card">3</div>
 9
10</div>
11
12  
13
14<style>
15
16.grid {
17
18  display: grid;
19
20  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
21
22  gap: 1rem;
23
24}
25
26.card {
27
28  background: salmon;
29
30  padding: 20px;
31
32}
33
34</style>

🔸 4. Comparativo Flexbox vs Grid Link to heading 

 1
 2| Característica         | Flexbox           | Grid               |
 3
 4|------------------------|-------------------|--------------------|
 5
 6| Eixo principal         | 1 dimensão         | 2 dimensões        |
 7
 8| Layout completo        | ❌                 | ✅                 |
 9
10| Alinhamento fácil      | ✅                 | ✅                 |
11
12| Reorganização visual   | Parcial            | Completa           |
13
14| Suporte a sobreposição | ❌                 | ✅                 |

📌 Quando usar um ou outro? Link to heading

  • Flexbox: Alinhar itens em linha/coluna, menus, botões.

  • Grid: Layouts complexos com várias colunas e linhas.

🔸 5. 🧱 Estrutura HTML básica Link to heading 

 1
 2<div class="layout">
 3
 4  <header>Header</header>
 5
 6  <aside>Menu</aside>
 7
 8  <main>
 9
10    <div class="cards">
11
12      <div class="card">Card A</div>
13
14      <div class="card">Card B</div>
15
16    </div>
17
18  </main>
19
20  <footer>Rodapé</footer>
21
22</div>

🎨 CSS básico com Grid + Flexbox Link to heading 

 1
 2.layout {
 3
 4  display: grid;
 5
 6  grid-template-areas:
 7
 8    "header header"
 9
10    "menu main"
11
12    "footer footer";
13
14  grid-template-columns: 200px 1fr;
15
16  grid-template-rows: auto 1fr auto;
17
18  gap: 10px;
19
20  height: 100vh;
21
22}
23
24  
25
26header { grid-area: header; background: #ccc; }
27
28aside  { grid-area: menu; background: #ddd; }
29
30main   { grid-area: main; background: #eee; }
31
32footer { grid-area: footer; background: #ccc; }
33
34  
35
36.cards {
37
38  display: flex;
39
40  flex-wrap: wrap;
41
42  gap: 1rem;
43
44  margin: 1rem;
45
46}
47
48.card {
49
50  background: #fff;
51
52  padding: 20px;
53
54  flex: 1 1 200px;
55
56  border: 1px solid #ccc;
57
58}