WorksheetsPreguntas sobre CSS Grid
Total questions: 20
Worksheet time: 10mins
¿Qué propiedad CSS se usa para definir en qué columna INICIA un elemento?
grid-start
grid-column-start
grid-begin
column-start
Si queremos que un elemento comience en la tercera línea vertical, ¿qué código usamos?
grid-column-start: 3;
grid-column: 3;
column-start: 3;
grid-start: 3;
¿Qué significa el valor "span 2" en CSS Grid?
Salta 2 espacios
Abarca 2 celdas
Divide en 2 partes
Multiplica por 2
¿Cuál es la propiedad shorthand que combina grid-column-start y grid-column-end?
grid-col
column
grid-column
grid-columns
En la sintaxis "grid-column: 2 / 5", ¿qué significa cada número?
Fila 2 hasta fila 5
Columna 2 hasta columna 5
Celda 2 hasta celda 5
Línea 2 y línea 5
¿Qué propiedad se usa para posicionar un elemento verticalmente en el grid?
grid-vertical
grid-y
grid-row
row-position
¿Qué hace el código "grid-row: 1 / 4"?
Crea 1 fila de tamaño 4
Abarca desde la línea horizontal 1 hasta la 4
Posiciona en la fila 1 y columna 4
Divide en 4 filas
¿Cuál es la sintaxis correcta de grid-area?
grid-area: row-start / column-start / row-end / column-end;
grid-area: column-start / row-start / column-end / row-end;
grid-area: x / y / width / height;
grid-area: start / end / top / bottom;
¿Qué significa un valor negativo como "grid-column-end: -1"?
Es un error
Cuenta desde la derecha
Resta una columna
Invierte el orden
¿Qué propiedad define el ancho de las COLUMNAS del grid?
grid-columns
column-width
grid-template-columns
grid-width
¿Qué hace el código "grid-template-columns: 100px 100px 100px"?
Crea 1 columna de 300px
Crea 3 columnas de 100px cada una
Crea columnas de mínimo 100px
Divide en 100 partes
¿Qué significa "1fr" en CSS Grid?
1 fracción del espacio disponible
1 píxel fijo
1 fila
1 frame
¿Cuál es la forma correcta de usar la función repeat()?
repeat(3, 100px);
repeat: 3 x 100px;
repeat-columns: 3, 100px;
grid-repeat(3, 100px);
¿Qué crea el código "grid-template-columns: repeat(4, 1fr)"?
4 columnas de tamaño igual
4 filas de tamaño igual
1 columna repetida 4 veces
4 píxeles de ancho
¿Qué propiedad define la altura de las FILAS del grid?
grid-rows
row-height
grid-height
grid-template-rows
¿Qué hace "grid-template-columns: 1fr 2fr"?
Crea 2 columnas, la segunda es el doble de ancha
Crea 3 columnas
Crea 1 columna de 2 fracciones
Suma 1 + 2 = 3 columnas
Si tengo "grid-column: 2 / span 3", ¿qué significa?
Inicia en columna 2 y abarca 3 celdas
Crea 2 columnas de 3 unidades
Termina en columna 2 y 3
Divide en 2 o 3 partes
¿Cuál es el valor por defecto de la propiedad "order"?
1
0
-1
auto
¿Qué propiedad permite superponer elementos en el grid?
grid-overlap
z-index combinado con grid-area
grid-stack
overlay-grid
¿Cuál es la diferencia principal entre Flexbox y Grid?
Flexbox es antiguo, Grid es moderno
Flexbox es 1D, Grid es 2D
Grid solo funciona en columnas
Flexbox no usa CSS
