Layouts Modernos com CSS Grid

Áudio automático ativado: as próximas questões serão lidas ao clicar em Continuar.

1. 1

   Qual declaração transforma um elemento em um contêiner de grade?

   A display: grid; B position: grid; C layout: grid;
2. 2

   Como criar três colunas de larguras iguais em um contêiner CSS Grid?

   A grid-template-columns: 3fr; B grid-template-columns: repeat(3, 1fr); C grid-columns: 1fr 3;
3. 3

   Qual propriedade define o espaçamento entre linhas e colunas de uma grade sem adicionar espaço nas bordas externas?

   A padding B margin C gap
4. 4

   Na grade representada, um item começa na linha vertical 1 e termina na linha vertical 3. Qual declaração produz esse posicionamento?

   

   A grid-column: 1 / 3; B grid-column: span 3; C grid-column: 1 / 2;
5. 5

   Em repeat(auto-fit, minmax(200px, 1fr)), o que acontece com as faixas vazias quando não existem itens suficientes para preenchê-las?

   A Elas permanecem reservadas com largura mínima de 200px. B Elas são recolhidas, permitindo que as faixas ocupadas se expandam. C Elas são convertidas automaticamente em linhas.
6. 6

   Qual declaração é mais adequada para criar uma grade responsiva em que cada coluna tenha no mínimo 240px e possa crescer para ocupar o espaço restante?

   A grid-template-columns: 240px 240px 240px; B grid-template-columns: repeat(auto-fit, 240px); C grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
7. 7

   Uma grade possui largura menor que seu contêiner. Qual propriedade pode centralizar a grade inteira horizontalmente dentro dele?

   A justify-content: center; B justify-items: center; C align-content: center;
8. 8

   Na representação, cada item está centralizado horizontalmente dentro de sua própria célula. Qual declaração aplicada ao contêiner gera esse resultado?

   

   A justify-content: center; B justify-items: center; C align-items: center;
9. 9

   Qual declaração centraliza um único item da grade nos eixos horizontal e vertical, sem alterar os demais itens?

   A place-content: center; B place-items: center; C place-self: center;
10. 10

    Qual declaração representa corretamente a organização visual mostrada, com cabeçalho, barra lateral, conteúdo principal e rodapé?

    

    A grid-template-areas: "header header" "sidebar main" "footer footer"; B grid-template-areas: "header sidebar" "main main" "footer sidebar"; C grid-template-areas: "header" "sidebar main" "footer";
11. 11

    Quando itens criam linhas implícitas que não foram declaradas em grid-template-rows, qual propriedade define o tamanho dessas novas linhas?

    A grid-template-auto B grid-auto-rows C grid-row-size
12. 12

    Qual risco deve ser considerado ao utilizar grid-auto-flow: dense para preencher lacunas da grade?

    A A propriedade impede a criação de colunas implícitas. B Todos os itens passam a ter obrigatoriamente o mesmo tamanho. C A ordem visual pode ficar diferente da ordem do DOM e da navegação por teclado.
13. 13

    Uma grade de 900px possui grid-template-columns: 200px 1fr 2fr e gap: 20px. Quais são as larguras das colunas fr?

    

    A 220px e 440px B 300px e 600px C 200px e 400px
14. 14

    Na grade ilustrada, o item destacado ocupa o espaço entre as linhas verticais 2 e 4 e entre as linhas horizontais 1 e 3. Qual conjunto de declarações descreve essa área?

    

    A grid-column: 1 / 3; grid-row: 2 / 4; B grid-column: 2 / 4; grid-row: 1 / 3; C grid-column: 2 / 3; grid-row: 1 / 4;
15. 15

    Qual é a principal finalidade do valor subgrid em CSS Grid?

    A Transformar automaticamente cada item da grade em um elemento flexível. B Criar uma grade independente com faixas calculadas apenas pelo conteúdo. C Permitir que uma grade filha utilize as faixas definidas pela grade ancestral.