soy Kseso y esto EsCSS

CSS Grid Layout: lista de lecturas (Arrieros somos VII)

Colección de artículos. ejemplos y vídeos sobre el CSS Grid Layout para que partiendo incluso desde cero puedas comprender y comenzar a experimentar la realización de grillas o rejillas web basadas en esta novedad de CSS.

CSS Grid Layout: lista de lecturas (Arrieros somos VII)

·Por Kseso ✎ 4
CSS Grid Layout: lista de lecturas

Si aún no te has puesto con, por lo menos a comprender qué es, el "CSS Grid Layout" y cómo va a suponer toda una revolución en la forma en que se construyan las grillas (o rejillas) de una web quizás estás pecando de ingenuo y desidia.

La única razón que se me ocurre para convencerte de la conveniencia de ir conociéndolo es remitirte a lo sucedido con el flexbox: hubo quienes cuando se quisieron dar cuenta ya habían sido arrollados y lo que debió ser un camino de aprendizaje progresivo devino en un ¡corre, corre que ya es tarde!

Así que sólo para quienes quieran ir conociendo y explorando el CSS Grid Layout es esta pequeña lista de lectura (o visionado) de artículos al respecto. Lista que es mi intención ir ampliando en el tiempo.

Lista de lecturas sobre el CSS Grid Layout:

Debido a la escasa (de momento) divulgación en español sobre el tema me permito comenzar el listado con algunos de los post de este blog dedicados al "CSS Grid layout".

ARTÍCULOS


W3cCSS Grid Layout Module Level 1

El documento del W3c al respecto [ING]. Nada como acudir a la fuente para tener la información técnica sobre cualquier aspecto de la rejilla CSS.

imagen decorativaDel layout Html físico al layout Css virtual

La diferencia entre construir el layout basado en el marcado HTML (elementos presentes en el documento) y hacerlo de forma virtual sólo en base a declaraciones CSS. Artículo en este blog.

CSS Grid Layout: guía básica para comenzar a usarloGuía básica para comenzar a usar el CSS Grid Layout

Explicación de la terminología y conceptos más relevantes así como de las distintas propiedades y sus valores relativas al CSS Grid Layout. Artículo en este Blog.

CSS Grid Layout: la revolución que estabas esperando ya llegóCSS Grid Layout: la revolución que esperas y que ya ha comenzado

Traducción al español en este blog del artículo original [ING] de Patrick Brosset "The future of layout with CSS: Grid Layouts" en el que explica y explora las novedades y posibilidades que trae el nuevo documento del consorcio W3c que desarrolla la construcción de rejillas con puro Css.

Ubicación de elementos en el Grid Layout a fondoGuía exhaustiva de colocación de elementos en el Grid Layout

Revisión exhaustiva de los diferentes métodos proporcionados por las especificaciones del CSS Grid Layout para construir la grilla y colocar elementos en ella. Traducción al español en este blog del artículo original [ING] de Manuel Rego @regocas"

CSS Grid y el módulo Box AlignmentCSS Grid Layout y el módulo Box Alignment

La construcción de la rejilla CSS se complementa con éste documento dedicado a cómo alinear unos ítems del grid con otros. El artículo original en inglés de Rachel Andrew explica y explora esta relación.

Eric MeyerSubgrids Considered Essential

El desarrollo del CSS Grid Layout es algo no cerrado. En este artículo Eric Meyer justifica la necesidad de incluir las subgrids y ejemplifica su uso.

CSS SubgridsSubgrids thinking out loud

El concepto de subgrids ha sido una de las últimas novedades incorporadas a la especificación. En este artículo [ING] Manuel Rego las explica.

performance grid layout Performance analysis of Grid Layout

Estudio y análisis de la carga para el navegador al conformar la página usando el Grid Layout y comparativa frente a otras vías como el Flexbox

ManzGrid CSS (Cuadrículas)

Artículo en español escrito por José Román, aka @Manz, sobre los conceptos principales y las propiedades que el CSS Grid Layout desarrolla.

EJEMPLOS y DEMOS de CSS GRID LAYOUTS


Grid by ExampleGrid by Example

Sitio de Rachel Andrew dedicado en exclusiva al Grid Layout. Incluye además de cuestiones teóricas multitud de grillas CSS construidas en base al él comentadas y explicadas.

CSS Grid Layout ExamplesCSS Grid Layout Examples

Más ejemplos, estos en Github.

DIVULGADORES del CSS GRID LAYOUT


w3cEditores del W3c CSS Grid Layout

Tab Atkins Jr. (Google)
Elika J. Etemad / fantasai (Invited Expert)
Rossen Atanassov (Microsoft)

Rachel AndrewRachel Andrew

Rachel Andrew es una autora inglesa que tanto en su Twitter @rachelandrew como en su blog desde hace un tiempo viene dedicando su tiempo a la explicación y divulgación del CSS Grid Layout.

Manuel Rego @regocasManuel Rego

Aka @regocas es un desarrollador español que desde Igalia está contribuyendo a la implementación del CSS Grid Layout en distintos navegadores y en desde su blog [ING] también publica artículos divulgativos del mismo.

Vídeos y Slides


En español | Manuel Rego - ¡CSS Grid Layout ya está aquí!



Sus slides

CSSconf EU 2014 | Rachel Andrew: CSS Grid Layout



Sus slides

Manuel Rego - CSS Grid Layout is Just Around the Corner



Sus slides

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso