Questionário de grid no CSS
Para passar no quiz, você deve responder corretamente pelo menos 18 das 20 perguntas abaixo.
O que é CSS Grid?
Qual das seguintes é a maneira correta de criar um grid container?
O que a propriedade
grid-template-columns faz?O que a propriedade
grid-template-rows faz?O que a função
minmax() faz?Qual é a forma abreviada para as propriedades
column-gap e row-gap?Qual é a diferença entre uma grade implícita e explícita?
Qual das seguintes unidades representa uma fração do espaço dentro do contêiner da grade?
O que são linhas de grade?
O que a propriedade
grid-column faz?Como você cria quatro colunas de largura igual?
O que a propriedade
grid-template-areas faz?O que a propriedade
grid-auto-flow faz?Qual das seguintes é a maneira correta de usar a propriedade
grid-template-areas?Qual das seguintes é a maneira correta de trabalhar com a propriedade
grid-auto-flow?Qual dos seguintes NÃO é uma propriedade válida de grid?
Quais dessas propriedades podem ser usadas para centralizar itens dentro de um elemento grid?
Qual dos seguintes é um valor correto para usar com a propriedade
grid-auto-columns?O que são grid tracks?
Qual das seguintes é a maneira correta de usar a função
minmax()?Como você posiciona um item da grade dentro de um layout definido por
grid-template-areas?O que a propriedade
grid-auto-rows controla?Qual propriedade você usaria para fazer um item de grade abranger várias linhas?
O que define uma grade explícita?
Qual valor para
grid-auto-flow faria com que novos itens preenchessem as colunas primeiro?Qual é o propósito de
grid-template-areas?Como você pode fazer um item da grade começar na linha da coluna 2 e terminar na linha da coluna 4?
Qual é o efeito de
grid-template-columns: 1fr 2fr 1fr?Como você criaria uma grade com 3 colunas iguais e um espaçamento de
20px entre elas?O que
repeat(3, minmax(100px, 1fr)) cria?Qual afirmação sobre grids implícitos é verdadeira?
O que a propriedade
place-items faz no CSS Grid?O que este CSS realiza?
.container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Como você pode criar layouts de grade assimétricos?
O que
grid-column-start: 2 faz em um item da grade?Qual propriedade você usaria para controlar o comportamento de overflow em grid tracks?
Qual será o resultado para o seguinte código?
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: auto 150px;
gap: 10px;
}Como você faria para que um item da grade (
grid item) ocupe todas as linhas disponíveis?Qual propriedade controla o alinhamento dos itens da grade ao longo do eixo do bloco?
Como você pode garantir que um item da grade permaneça na primeira coluna independentemente das alterações na grade?