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

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 Don Kseso Kseso

Comentarios: 4

  1. Hola !!!

    Mi pregunta es bastante larga y creo que no trata sobre ningún tema que tenéis en el Blog. Pero como vosotros entendéis de esto y no sabia a quien acudir para pedirle ayuda, os escribo para a ver si me podéis solucionar un problema que tengo con la plantilla de mi blog.
    Hace dos días instalé una barra con menú plegable, en la parte de arriba del blog. La instalé con un código desde la plantilla HTML y la he adaptado con un CSS.
    Creo que al instalarla he borrado o tocado algo, sin darme cuenta y ahora no me funcionan (desde las entradas y desde los gadgets HTML) los botones de:

    Lista numerada
    1____
    2____
    3____

    Lista con viñetas
    . ____
    . ____
    . ____

    Cita “ ( aquello para que el texto te queda de menor achura, ya me entiendes)

    Bueno, no es que NO ME FUNCIONAN, es que en las entradas sí que puedo escribir con estos botones, pero luego una vez publicada la entrada o instalado el gadget no me permite verlos, vamos que no se ven o no funcionan. Y tengo en todas las entradas, los pasos de la preparación de la receta (mi blog es de cocina) separados con estos botones. Entro desde editar entrada y si están, pero en el blog en las entradas o lo que es lo mismo los lectores del blog no los ven. Me entendéis verdad ??

    Como puedo solucionar esto ??
    No puedo diseñar una plantilla nueva, es mucha faena. Si me podéis ayudar os lo agradeciera mucho !!!
    Espero tu respuesta !!

    Mi blog: Mis Dulces Joyas
    El enlace: http://misdulcesjoyas.blogspot.com.es/p/pagina-principal_8.html

    Gracias, un saludo !!!
    Biljana

    ResponderEliminar
    Respuestas
    1. Uy... vuestra respuesta :) Saludos !!!

      Eliminar
    2. Mucho me temo, Niljana, que no puedo prestarte otra ayuda que no sea volver a cargar la copia de seguridad de la plantilla que debiste hacer antes de modificar nada.

      También puedes pasarte por el foro oficial de Blogger y consultar allí.

      Un saludo y suerte

      Eliminar
    3. Gracias por la respuesta !!!! Saludos !!!!

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap