Questionário CSS Grid Layout, Flexbox, MediaQueries

O que define uma 'grid container' em CSS Grid?

• display: block;

• display: flex;

• display: grid;

• display: inline-block;

Answer explanation

O valor display: grid; transforma um elemento em um contêiner de grade, permitindo o uso de propriedades de layout de grade.

Qual propriedade é usada para definir o número de colunas em uma grid?

• grid-template-columns

• grid-columns

• grid-column-count

• columns

Answer explanation

A propriedade grid-template-columns define o número e o tamanho das colunas em uma grade CSS.

Como você define o espaçamento entre os itens da grid?

• a) grid-spacing

• b) grid-gap

• c) grid-item-space

• d) item-gap

Answer explanation

A propriedade grid-gap (agora deprecada em favor de gap) define o espaçamento entre as linhas e colunas da grade.

Qual valor da propriedade grid-template-rows cria três linhas de alturas diferentes: 100px, auto e 1fr?

• grid-template-rows: 100px auto 1fr;

• grid-template-rows: 100px, auto, 1fr;

• grid-template-rows: 100px 1fr auto;

• grid-template-rows: 1fr auto 100px;

Answer explanation

A propriedade grid-template-rows define o tamanho das linhas, e os valores 100px, auto e 1fr especificam suas alturas respectivas.

Como você faz um item ocupar duas colunas na grade?

• grid-column: span 2;

• grid-column-start: 2;

• grid-span: 2;

• grid-columns: 2;

Answer explanation

A propriedade grid-column com o valor span 2 faz com que o item se estenda por duas colunas na grade.

Qual das seguintes propriedades pode ser usada para centralizar um item dentro de uma célula da grid?

• justify-self

• align-self

• place-self

• Todas as anteriores

Answer explanation

justify-self centraliza horizontalmente, align-self centraliza verticalmente e place-self pode ser usada para ambas direções.

Qual propriedade define o contêiner flexível em Flexbox?

• display: block;

• display: flex;

• display: grid;

• display: inline-block;

Answer explanation

Transforma um elemento em um contêiner flexível, permitindo o uso das propriedades de Flexbox.

Qual propriedade define a direção dos itens flexíveis?

• flex-direction

• flex-wrap

• flex-flow

• flex-order

Answer explanation

A propriedade flex-direction define a direção dos itens dentro do contêiner flexível (linha ou coluna).

Como você alinha itens ao longo do eixo principal em Flexbox?

• align-items

• justify-content

• align-content

• align-content

Answer explanation

A propriedade justify-content alinha os itens ao longo do eixo principal do contêiner flexível.

Qual propriedade é usada para definir o número de linhas em uma grid?

• grid-template-rows

• grid-rows

• grid-row-count

• rows

Answer explanation

A propriedade correta usada para definir o número de linhas em uma grid é grid-template-rows.