Scribd
Cargar
145 vistas

Css Grid

Este documento presenta una introducción al CSS Grid Layout. Explica conceptos básicos como contenedor, ítem, fila, columna y área. Detalla propiedades como display grid, grid-template y grid-gap para definir la grilla. También cubre alineación de contenido, ítems y contenedor usando propiedades como justify-items, align-items y place-content. Por último, incluye ejemplos y retos prácticos para aplicar lo aprendido.

Cargado por

Jhoan Stiven Cortez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
145 vistas

Css Grid

Este documento presenta una introducción al CSS Grid Layout. Explica conceptos básicos como contenedor, ítem, fila, columna y área. Detalla propiedades como display grid, grid-template y grid-gap para definir la grilla. También cubre alineación de contenido, ítems y contenedor usando propiedades como justify-items, align-items y place-content. Por último, incluye ejemplos y retos prácticos para aplicar lo aprendido.

Cargado por

Jhoan Stiven Cortez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 36

Curso de

CSS Grid Básico


Estefany Salas
¿Qué es CSS Grid?
Columna

Fila

Grilla
Conceptos para
comenzar
Conceptos para comenzar

Contenedor Item
Conceptos para comenzar

Línea
Conceptos para comenzar

Celda
Conceptos para comenzar

Track Área
Propiedades del
contenedor
Propiedades del contenedor

● Display grid

● Grid-template

● Gaps

● Grid-auto
Reto

Crear un grid de 3 filas y 2


columnas con un gap de
20px entre ellas.

Los números de ítems


deben coincidir con
la imagen.
Propiedades de
alineación
Propiedades de alineación
de los ítems

● Justify-items

● Align-items

● Place-items
Propiedades de alineación
del contenedor

● Justify-content

● Align-content

● Place-content
Propiedades de alineación
del ítem

● Justify-self

● Align-self

● Place-self
Reto

Crear un grid de 2x2 donde


los ítems se ubiquen en la
esquina inferior derecha del
contenedor, el contenedor
debe estar centrado.
Propiedades de
ubicación
Propiedades de ubicación

grid-column-start grid-row-start
grid-column-end grid-row-end

grid-row
grid-column
Propiedades de ubicación

grid-area
Reto

Arma la grilla
de la imagen.
Funciones especiales
Funciones especiales

● minmax

● repeat
Keywords especiales
Keywords especiales

● fr

● min-content

● max-content

● auto-fill/auto-fit
Proyecto
Comencemos
imaginando
nuestras grillas.
Hagamos nuestra
primera sección
Creando la grilla con
área
Armando el listado
¿Cómo hacer nuestro
proyecto responsivo?

También podría gustarte