CSS Grids

Como se habilita el uso de 'Grid' para un elemento HTML

• Initiate : Grid;

• Grid: display;

• display : grid;

• flex-box : grid;

• grid : init;

Como se agregar 3 columnas de tamaño 50px a cada fila de la

cuadrícula (Grid Layout)?

• grid-direction : columns;

• grid-template-columns : 50px 50px 50px;

• grid-columns : 50px 50px 50px;

• grid-template-columns : 50px 50px 50px 50px;

• grid-direction-columns : 50px 50px 50px;

cual medida se usa para establece la columna o fila en una fracción del espacio disponible,

• fr

• auto

• fraction

• %

• ft

Las líneas horizontales y verticales hipotéticas que crean la cuadrícula se denomina :

• Lines

• gaps

• spaces

• divs

• stripes

Como hacemos que un elemento comience en la primera línea vertical de la cuadrícula a la izquierda y se extienda hasta la tercera línea de la cuadrícula

• grid-column: 1 / 4;

• grid-column-gap: 1 / 3;

• grid-row: 1 : 3;

• grid-column: 12/ 3;

• grid-column: 1 / 3;

Cual de la siguientes propiedades especifica el tamaño del espacio entre columnas

• grid-row-gap

• column-row-gap

• grid-row-column

• column-grid-gap

• grid-column-gap

Cual de las siguientes estilos de 'Grid' , NO es valido

• grid-template-columns: 1fr 50px 1fr 50px 20px;

• grid-template-columns: repeat(2, 1fr 50px) 20px;

• grid-template-rows: repeat(100, 50px);

• grid-template-columns: 1fr 1fr 1fr;

• grid-template-rows: repeat(9pw);

En 'Grid Layout' cuales 2 propiedad se pueden usar para alinear elementos Horizontalmente?

• align-self

• justify-self

• justify-content

• align-items

• justify-items

Answer explanation

Justify-self e para un solo elemento

justify-items se usa para todos los elementos

En 'Grid Layout' cuales 2 propiedad se pueden usar para alinear elementos verticalmente?

• align-items

• justify-items

• align-self

• justify-content

• justify-self

Answer explanation

align-self e para un solo elemento

align-items se usa para todos los elementos

Para que se usa 'Auto-Fit'

• permite insertar automáticamente tantas filas o columnas del tamaño deseado como sea posible

• Esto rellena automáticamente las filas o columnas que uno elimine

• estira sus elementos para que se ajusten al tamaño del contenedor