Curso CSS Grid Paso a Paso
Bienvenidos a este curso completo de Grid CSS, esperamos les sea de utilidad y puedan sacarle provecho a esta magnífica opción que nos brinda CSS para poder darle estilo a nuestras páginas web.
Todos los que estamos en el mundo del desarrollo web, nos hemos topado con grandes frustraciones, o si no es así, recuerda cuando querías posicionar un elemento a la derecha o izquierda utilizando float, o también, posicionar elementos en un lugar específico de la página, o que decir si necesitabas un elemento de bloque pero resulta que no se ubicaba como deseabamos, a todos nos ha pasado en algún momento, y si eres novato y llegaste a este curso justo ahora, considerate afortunado, pues eso que mencioné, es cosa del pasado, puesto que ahora existen nuevas formas de posicionar elementos y ubicarlos donde a uno le plazca.
Hablo de CSS Grid, el sucesor, por decirlo así, de Flexbox otra forma anterior a CSS Grid, La cual, es recomendable que sepas antes de recibir este curso, ya que su forma de trabajar es algo parecida en algunas cosas, manejando Flexbox se te hará más sencillo entender CSS Grid.
La principal diferencia entre grid y flexbox, es que uno, actúa en forma unidimensional (Flexbox) y el otro de forma multidimensional (grid) lo cual nos da una ventaja importante a la hora de crear una página web
Para poder realizar el curso sin problemas, es conveniente que te familiarices con los siguiente términos:
- container (contenedor): al que se le aplica la regla grid, de lo contrario no se activará.
- item (elemento hijo): Toman la disposición del padre, actúa como elemento contenedor
- grid-cell (celda); cada uno de los ítems en forma de cuadro que están dentro del contenedor
- grid-area (área); Conjunto de celdas, abarca a todas las celdas en su conjunto
- grid-track (Banda); Banda vertical u horizontal de las celdas
- grid-line (línea): separa las celdas a través de espacios horizontales o verticales entre las celdas.
Cómo primer punto hablaremos de grid y grid-inline, son las dos valores que le aplicamos a la propiedad display. Ya que si no especificamos uno de estos valores la función de grid no se activará, observa el siguiente ejemplo
Te podría interesar
Curso CSS Flexbox Paso a Paso
Curso CSS Animaciones Paso a Paso
display:grid
Activa el contenedor en forma de grilladisplay: inline-grid
Activa el contenedor en forma de grilla lenealmenteColumnas y filas
Antes de comenzar a utilizar grid, debemos escoger qué disposición utilizaremos, ya sea, grid o inline-grid, una vez hecho eso, agregamos algunas propiedades al contenedor padre, de las cuales podemos elegir las siguientes:
grid-templates-columns y grid-templates-rows, las cuales nos servirán para darle dimensión a nuestra grid
grid-templates-columns y grid-templates-rows, las cuales nos servirán para darle dimensión a nuestra grid
- grid-templates-columns: Permite manipular el tamaño de las columnas
- grid-templates-rows: Permite manipular el tamaño de las filas
Columnas (columns)
Filas (rows)
Gap
Gap, son los espacios que existe entre columnas y filas, cuenta con las siguientes propiedades:
column-gap: Genera un espacio entre columnas, puede establecer su tamaño en px
row-gap: Genera un espacio entre filas, puede establecerse en px
gap: Es la abreviatura de las dos anteriores, solo con escribir gap, aplicamos espacios tanto a filas como a columnas, de la misma manera se puede usar px para darle el espacio o separación que queramos.
veamos ahora, un ejemplo de cada propiedad:
column-gap
Se aplicara solo a las columnasrow-gap
Se aplicara solo a las filasgap
Podemos aplicar valores distintos para filas y columnas, tambien es psible aplicar un solo valor si deseamos que la separacion sea uniforme
column-line y row-line
Se le llama column-line al espacio entre columnas, y row-line al espacio que existe entre filas
Ejemplo
En este ejemplo estamos indicando que el item1 inicie en la primera línea, eso lo especificamos con grid-column-start: 1 y que llegue a la columna 3 es decir, que abarque dos columna excepto la tercera, eso lo hacemos con grid-column-end: 3.
Ejemplo
En este ejemplo estamos indicando que el item1 inicie en la primera línea, eso lo especificamos con grid-row-start: 1 y que llegue a la fila 3 es decir, que abarque dos filas excepto la tercera, eso lo hacemos con grid-row-end: 3.Las propiedades grid-template-columns y grid-templates-rows
grid-templates-columns
Esta propiedad define el número de columnas que tendrá el grid container, también puede definir el ancho de cada columna. Esto se realiza mediante valores, cada valor indica el tamaño de cada columna, si desea columnas de dimensiones diferentes, en caso de que todas sean del mismo tamaño, especifique la palabra “auto”
Ejemplo
A continuación realizaremos un ejemplo, donde crearemos un container con 4 columnas del mismo tamaño, por lo tanto, debemos establecer en auto a todas separadas por una coma (,) veamos.Ejemplo
En el ejemplo anterior le especificamos a la propiedad grid-template-columns que las columnas fueran “auto”, ahora le daremos un valor diferente a cada columna combinándola con autoEjemplo
En el siguiente ejemplo, crearemos tres filas de, 70px, 140px y 200px respectivamente, observa que cada una tiene altos diferentes y que además de grid-template-columns, recuerda que siempre irá grid-template-columns, de lo contrario, será imposible crear el grid.justify-content
La propiedad justify-content alinea los elementos dentro de su contenedor padre, siempre y cuando la medida de esos elemento sea menor que su contenedor, de lo contrario la propiedad no tendrá efecto
Sus respectivos valores son:
Sus respectivos valores son:
justify-content: space-evenly | space-between | space-around | start | end | center
Veamos un ejemplo de cada uno:
justify-content: start
justify-content: end
justify-content: space-evenly
justify-content: space-around
justify-content: space-between
justify-content: center
align-content
Con align-content alineamos los elementos de forma vertical dentro del contenedor padre, recordando que siempre el tamaño de los elementos tiene que ser menor que el mismo contenedor
align-content: start
align-content: end
align-content: center
align-content: space-around
align-content: space-between
align-content: space-evenly
Grid Item
Elementos secundarios o grid elements
Por defecto, un contenedor tiene un elemento grid para cada fila y columna, pero puede diseñar los elementos de grid para que abarquen varias columnas y / o filas.
grid item contiene dos propiedades fundamentales:
- grid-column
- grd-row
grid-column
Con grid-column tu defines donde inicia y termina una columna para ubicar un elemento dentro del contenedor. a su vez, esta es una forma abreviada de las propiedades, grid-column-start y grid-column-end
Para colocar un elemento, tienes dos posibilidades, hacer referencia a los números de línea o utilizar la palabra clave "span" para definir cuántas columnas ocupará el elemento.
grid-column
grid-column usando span
Ejemplo
En este ejemplo como puedes observar, se toman directamente 5 columnas, a diferencia del ejemplo anterior donde se indica un número pero que no abarque la columna siguiente
grid-row
Al igual que con grid-column, posiconamos las columnas, con la propiedad grid-row podemos posicionar los elementos, en filas, indicar donde iniciará una fila y donde terminará, grid-row, es una propiedad abreviada de la propiedades grid-row-start y grid-row-end
Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas filas abarcará el elemento, de la misma manera de con grid-column.
ejemplo
En este ejemplo Haremos que el item1 comience en la columna 1 y fila 1 y termine en la fila 3, es decir antes de la fila 4 si existiera.
ejemplo
En este ejemplo Haremos que el item3 abarque 2 filas y que comience en la columna 1 y termine en la fila 2, aqui especificamos cuantas filas queremos ocupar.grid-area
La propiedad grid-area, resulta ser una forma abreviada de las propiedades, grid-row-start, grid-row-end, grid-column-star y grid-column-end
ejemplo
En el siguiente ejemplo haremos que el item8 comience en la fila 1 y columna 2, y termine antes de la fila 5 y antes de la columna 5:
ejemplo
En el siguiente ejemplo haremos que el item10 comience en la fila 1 y columna 1, y abarque 3 filas y 3 columnas
Naming Grid Items
grid-area también se puede usar para asignar nombres a elementos de grid nombrados, pueden ser referidos por la propiedad grid-template-area.
Es importante recordar que cada fila está definida por apóstrofes ' ' y las columnas en cada fila se definen dentro de los apóstrofes, separadas por un espacio. Así mismo, un punto (.) representa un casilla vacía
Ejemplo de una estructura web
En este ejemplo se te presenta lo que podría ser la estructura de una página web, observa lo maravillosos de css grid, nos permite hacer mucho con poco, en realidad, muy poco.
Ejemplo
En este ejemplo, haremos que el Item1 abarque cinco columnas en una grid de de cinco columnas y tres filas, observa:
Ejemplo utilizando elementos de vacio
Observa que hemos dejado dos puntos ( . . ) lo que significa que de 5 columnas, el item4 solamente tomará 3 columnas.
Ejemplo utilizando elementos de vacio abarcando dos filas
Ten presente que hasta ahora, solo estamos abarcando a lo ancho de la columna, como en el ejemplo de arriba, observa cómo se hace abarcando hacia abajo osea mas filas, dos en este caso.
order ítems
En el ejemplo anterior manipulamos el item3 de forma intencional, es decir cambiamos su orden, pero lo hicimos de una manera un poco improvisada, ya que para ello existe la forma correcta de hacer, siempre utilizando la propiedad grid-area, veamos cómo se hace:
Fin del curso, si llegaste hasta aquí, en horabuena!, ya que has aprendido acerca de CSS Grid, continúa aprendiendo, ya que nunca es suficiente, te dejamos alguno recursos que te pueden aportar mucho valor.
CSS Tricks
CDN
W3School
W3C
Recuerda compartir este curso con tus amigos en las redes sociales, para que más personas aprendan sobre CSS. Hasta un próximo curso.
Redes Sociales