Quiz 13 - Introdução

1. Qual a principal diferença entre Flexbox e CSS Grid?

Flexbox é mais rápido que o Grid

Grid só funciona em cores escuras

Flexbox é para layouts unidimensionais (linha OU coluna) e Grid é bidimensional (linha E coluna)

Não há diferença, são o mesmo sistema *Explicação: O Grid permite controlar o posicionamento vertical e horizontal simultaneamente, enquanto o Flexbox foca em um eixo por vez.*

2. Como transformamos um elemento pai em um container de grade?

`display: flex;`

`position: grid;`

`display: grid;`

`grid: enabled;` *Explicação: O valor `display: grid` ativa todas as funcionalidades do Grid Layout no elemento.*

3. Para que serve a propriedade `grid-template-columns`?

Para definir a cor das letras nas colunas

Para definir a quantidade e a largura das colunas da grade

Para esconder as colunas do site

Para criar um menu de navegação *Explicação: Essa propriedade desenha as trilhas verticais da sua grade.*

4. O que significa a unidade `1fr` no CSS Grid?

Um pixel fixo

Uma fração do espaço disponível no container da grade

Um primeiro plano da imagem

Uma frequência de atualização da tela *Explicação: O `fr` (fraction) é uma unidade flexível que divide o espaço proporcionalmente.*

5. Qual a função da expressão `repeat(3, 1fr)`?

Repetir a mesma imagem 3 vezes

Criar 3 colunas de larguras iguais (cada uma com 1 fração do espaço)

Fazer o site atualizar 3 vezes por segundo

Multiplicar o tamanho da fonte por 3 *Explicação: O `repeat` evita a repetição manual de valores iguais no grid.*

6. Qual propriedade define o espaçamento entre as células (linhas e colunas) da grade?

`margin`

`padding`

`gap`

`space` *Explicação: O `gap` (antigamente `grid-gap`) cria o espaçamento interno entre os elementos da grade de forma simples.*

7. No código `grid-column: 1 / 3;`, o que o item está fazendo?

Somando 1 com 3

Ocupando o espaço da coluna 1 até a linha da coluna 3 (ou seja, 2 colunas)

Mudando para a página 3

Ficando invisível *Explicação: Essa propriedade define as linhas de início e fim que um item deve ocupar na horizontal.*

8. O que acontece se definirmos `display: grid;` e não configurarmos colunas ou linhas?

O site trava

O elemento desaparece

Os itens serão empilhados em uma única coluna (grade implícita)

Os itens ficarão todos uns sobre os outros *Explicação: Por padrão, o grid cria uma linha para cada item se nenhuma coluna for definida.*

9. Qual o benefício de usar CSS Grid para o layout principal de uma página?

O site fica mais leve

Oferece maior controle sobre o alinhamento complexo de grandes áreas (Header, Aside, Footer)

Deixa o site imune a bugs

O Google indexa melhor o site *Explicação: O Grid foi feito especificamente para lidar com macro-layouts de forma organizada.*

10. A propriedade `grid-template-rows` serve para quê?

Mudar a cor das linhas da grade

Definir a altura e quantidade de linhas horizontais na grade

Remover as linhas do cabeçalho

Girar a tabela em 90 graus *Explicação: Ela define as trilhas horizontais, permitindo especificar alturas fixas ou flexíveis.*