Aprende Grid de CSS en 5 minutos

      1 comentario en Aprende Grid de CSS en 5 minutos

Un rápido tutorial sobre el futuro del diseño de páginas web


Los diseños Grid son fundamentales en los diseños de las páginas web, y el módulo Grid de CSS es la herramienta más poderosa y sencilla para crearlos. Personalmente, creo que es mucho mejor que por ejemplo Bootstrap (lee aquí (en inglés) porqué).
Este módulo también ha obtenido soporte para los navegadores más importantes este año, así que creo que cualquier desarrollador web tendrá que aprender esta tecnología en un futuro no muy lejano.
En este artículo veremos los fundamentos del Grid de CSS en primer lugar. Dejaremos todo lo que no debería preocuparnos hasta que hayamos entendido los fundamentos.

También he creado un curso gratuito de Grid de CSS. Haz clic aquí (en inglés) para tener acceso completo.

Además, puedes leer este artículo (en inglés) que explica qué aprenderás en el curso.
Ahora, ¡vamos al grano!

Nuestro primero diseño grid

Los dos ingredientes principales de un Grid de CSS son el wrapper (envoltorio) -padre- y los items (elementos) -hijos-.
El wrapper es el grid propiamente dicho y los items son el contenido dentro del grid.
Estas son las etiquetas para un wrapper con seis items dentro:

Para convertir nuestro wrapper <div> en un grid, tan sólo tenemos que darle un display de grid:

Pero esto todavía no hace nada, ya que aún no hemos definido el aspecto de nuestro grid. Tan solo amontonará seis <div> uno encima de otro.

Hemos añadido algo de estilos, pero no están relacionados con el grid.

Columnas y filas

Para que tenga dos dimensiones, tenemos que definir las filas y las columnas. Vamos a crear tres columnas y dos filas. Usaremos las propiedades grid-template-row y grid-template-column.

Como hemos definido tres valores para grid-template-columns, tendremos tres columnas. Vamos a obtener dos filas, ya que hemos especificado dos valores para grid-template-rows.
Los valores indican la anchura de nuestras columnas (100px) o la altura de nuestras filas (50px). Este es el resultado:

Para asegurarnos de que entendemos la relación entre los valores y el aspecto del grid, echemos un vistazo también a este ejemplo.

Intentemos entender la conexión entre el código y el diseño.
Este es el resultado:

Colocando los elementos

Lo siguiente que necesitamos conocer es como colocar items en el grid. Aquí es donde tenemos los superpoderes, ya que es muy sencillo crear diseños.
Vamos a crear un grid 3×3, usando el mismo etiquetado anterior.

El resultado es este disño:

Observamos que vemos una grid 3×2 en la página, mientras que la hemos definido 3×3. Esto es porque sólo tenemos tres elementos con los que rellenar el grid. Si tuviéramos tres más, la fila de abajo también se habría rellenado.

Para posicionar y redimensionar los objetos los definiremos y usaremos las propiedades grid-column y grid-row.

Lo que estamos diciendo aquí es que queremos que el item1 empiece en la primera línea del grid y termine en la cuarta línea de la columna. En otras palabras, tomará la fila entera. Aquí es como se verá en pantalla:

¿Confundido porque tenemos cuatro líneas de columna cuando sólo tenemos tres columnas? Echa un vistazo a esta imagen, donde hemos dibujado las líneas de la columna en negro.

Fíjate que ahora estamos usando todas las filas del grid. Cuando hicimos que el primer elemento tomará la primera línea entera, empujó el resto de items hacia abajo.
Finalmente, os mostramos un modo más sencillo de escribir la sintaxis anterior:

Para asegurarnos de que hemos entendido este concepto correctamente, vamos a recolocar un poco los elementos:

Así es como se verá en la página. Intenta averiguar por ti mismo porque se verá así, no debería ser muy difícil.
¡Y eso es todo!
Naturalmente, hay un montón de conceptos que aún no hemos visto. Si quieres aprenderlos, déjanos tu correo electrónico aquí y te avisaremos cuando lancemos nuestro curso gratuito de Grid de CSS en Scrimba.
Si tienes alguna pregunta, deja un comentario y lo contestaremos del mejor modo posible. También puedes contactar conmigo vía Twitter.
Además, también hemos publicado un tutorial de Flexbox (en inglés), así que échale un vistazo para conocer otro fantástico módulo CSS.

Nota: puedes encontrar el artículo original en https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228

Un pensamiento en “Aprende Grid de CSS en 5 minutos

Responder a CAR Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *