El Manual de CSS Grid Layout te explica una de las nuevas utilidades de CSS, que ya ha revolucionado la manera con la que se crean las páginas web.
CSS Grid, o Grid Layout es un nuevo estándar de las Hojas de Estilo en Cascada que nos permite maquetar contenido ajustándolo a una rejilla totalmente configurable mediante estilos CSS.
Gracias a CSS Grid Layout podrás colocar elementos dentro de la página como nunca antes habías podido, independientemente de cómo aparecen en el código HTML y de manera extremadamente versátil, ya que podemos cambiar radicalmente el aspecto y disposición del contenido únicamente cambiando el código CSS. Por supuesto, en combinación con las media queries podrás además adaptar la rejilla y la posición de los elementos de la página en función de las condiciones del usuario, el tamaño de su pantalla, etc.
El manual de Grid Layout introducirá los conceptos de necesario conocimiento para poder sacar partido a esta herramienta de las CSS, y luego aportará diversas prácticas para que veas cómo usar CSS Grid en ejemplos de la vida real.
En Manual de CSS Grid Layout encuentras:
Artículos del manual
-
Introducción a CSS Grid Layout
Nuestro manual de Grid Layout comienza explicando este nuevo estándar para la creación de rejillas de elementos con CSS para páginas web. En estos artículos queremos entender la intención del estándar CSS para crear las grillas y cómo vamos a trabajar para conseguir que los elementos se organicen en filas y columnas con la distribución que necesitemos para nuestro diseño.
-
1
Qué es CSS Grid Layout
En este artículo te presentamos Grid Layout, el estándar de CSS para la posición de los elementos en una rejilla, con el que podrás maquetar de manera precisa cualquier contenido HTML.
-
2
Conceptos básicos de CSS Grid
Qué tienes que aprender para entender CSS Grid Layout, el estándar CSS para el trabajo con rejillas. Líneas, celdas, áreas, columnas…
-
Definición de la distribución de filas y columnas con CSS Grid
En estos artículos queremos explicar todos los detalles para la creación de distribuciones de filas y columnas usando CSS Grid Layout. Veremos sobre todo las posibilidades que nos ofrecen los atributos grid-template-columns y grid-template-rows con diversas variantes y aplicando nuevas unidades que nos ofrece el estándar de CSS para los elementos de grid.
-
3
Propiedades principales de CSS Grid Layout
En este artículo comenzamos las prácticas para trabajar con CSS Grid Layout, aportando los primeros atributos y valores que podemos usar dentro del sistema de rejilla.
-
4
Ajustar las filas y columnas de la rejilla CSS
Descripción detallada de las propiedades disponibles en los contenedores rejilla para definir filas y columnas, con tamaños especificados de diversos modos, usando el estándar CSS Grid Layout
-
5
Unidades y funciones para tamaños de columnas y filas en CSS Grid Layout
Vamos a ver un conjunto de formas de definir tamaños de filas y columnas en CSS, con distintas unidades de CSS, algunas nuevas en CSS Grid Layout. Veremos unidades fijas y relativas, fr, auto y funciones como repeat y minmax.
-
6
Alineación en el contenedor display grid
Seguimos con atributos CSS que definen los estilos de manera global para el contenedor display grid, en este caso viendo qué posibilidades tenemos para la alineación vertical y horizontal de los elementos de la rejilla.
Descargas
-
Libro electrónico de CSS Grid Layout Aunque llevamos pocos capítulos escritos todavía sobre CSS Grid Layout, hemos publicado ya los libros electrónicos con el contenido de este manual (actualmente sólo son 4 artículos pero irá creciendo). Puedes obtener el manual en varios formatos, para facilitar la lectura en cada tipo de ordenador o dispositivo, PDF y ePub.
Archivos disponibles: PDF, ePup
Páginas: 38 (Referencia por el archivo PDF)