Comparação entre Flexbox, Grid e Layouts em Colunas
Este artigo explica a comparação entre Flexbox, Grid e Layouts em Colunas.
Você aprenderá as diferenças entre Flexbox, Grid e Layouts em Colunas, e quando usar cada um.
YouTube Video
HTML para Visualização
css-layout-comparision.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>Comparação entre Flexbox, Grid e Layouts em Colunas
CSS flex, grid e columns são todas técnicas para alinhar e organizar elementos, mas cada uma tem suas próprias vantagens e casos de uso ideais. Abaixo está uma explicação clara de suas diferenças por meio de uma comparação.
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}Recursos
- Adequado para layouts unidirecionais—sejam horizontais ou verticais.
- Permite controle flexível sobre a ordem e flexibilidade dos elementos.
- Mais adequado para layouts de pequena escala, como barras de navegação e grupos de botões.
Vantagens
- Ajusta automaticamente o tamanho dos elementos filhos.
- Você pode alterar a ordem dos elementos usando propriedades como
flex-direction,flex-wrapeorder.
Exemplo de alteração da ordem de exibição
flex-direction
Como exemplo de alteração da ordem de exibição, vamos definir a propriedade flex-direction como column.
1.flex-container {
2 flex-direction: column;
3}Quando flex-direction é definido como column, os itens mudam de um layout horizontal para um layout vertical. O layout muda de um formato da esquerda para a direita para de cima para baixo.
flex-wrap
Definir wrap-reverse para a propriedade flex-wrap inverte a ordem das linhas agrupadas em relação à direção usual.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}Dessa forma, as linhas são exibidas empilhando-se de baixo para cima.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}Quando flex-direction é definido como column e flex-wrap como wrap-reverse, os itens são dispostos verticalmente enquanto as colunas se agrupam da direita para a esquerda. Como neste exemplo, a ordem das colunas é invertida da direção usual da esquerda para a direita, e os itens são adicionados da direita para a esquerda.
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16}Recursos
- Ideal para layouts bidimensionais.
- Permite uma definição clara de layouts baseados em grade.
- Ótimo para designs mais complexos e para a estrutura geral da página.
Vantagens
- Linhas e colunas podem ser definidas simultaneamente.
- Seções podem ser posicionadas usando áreas nomeadas (
grid-area). - Os elementos filhos podem ser posicionados livremente dentro da grade, permitindo controle flexível da ordem.
Exemplo de alteração da ordem de exibição
Como exemplo de alteração da ordem de exibição, vamos usar a propriedade grid-template-areas para definir as posições de exibição.
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }Neste exemplo, a propriedade grid-template-areas é usada para definir visualmente o layout geral da grade e atribuir nomes de áreas a cada célula. Então, ao atribuir o nome correspondente de grid-area a cada elemento filho, eles são posicionados nas posições desejadas. Ao usar grid dessa forma, você pode não apenas alterar livremente a ordem de exibição dos elementos, mas também criar facilmente layouts complexos e únicos.
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}Recursos
- Você pode criar facilmente colunas no estilo de revistas.
- Ideal para conteúdo de texto fluido.
- Segue a ordem de origem do HTML, o que o torna menos adequado para controlar a ordem dos elementos.
Vantagens
- Pode dividir automaticamente textos longos.
- Você pode criar de forma muito fácil layouts no estilo de jornais.
Tabela Comparativa
| Recurso / Caso de Uso | Flexbox | Grid | Colunas |
|---|---|---|---|
| Dimensão do Layout | 1D (horizontal ou vertical) | 2D (horizontal e vertical) | 1D (vertical) |
| Melhor Para | Alinhamento de componentes | Estrutura de página completa | Texto em várias colunas |
| Flexibilidade do Layout | Alta (ordem e tamanho) | Muito Alta (definição de áreas) | Baixa (apenas divisão automática) |
| Controle dos Elementos Filhos | Flexível | Claramente definido | Difícil de controlar |
| Intenção do Layout | Orientado ao conteúdo | Orientado ao layout | Orientado ao texto |
Resumo
- Flexbox é ideal quando você quer alinhar elementos em uma linha, como cabeçalhos ou listas de cartões.
- Grid é adequado quando você quer criar o layout completo, como a estrutura de uma página web.
- Colunas são melhores quando você quer formatar texto em várias colunas, como em artigos ou blogs.
Você também pode combiná-los conforme necessário. Por exemplo, você pode criar o layout geral com Grid e alinhar os elementos internos com Flex.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.