Hace unas semanas, hablé en
Frontend NE en Newcastle y expliqué en su mayoría qué características tendrían en CSS Grid Subgrid desde Grid Level 2. Al no tener implementación de esta propiedad (en los navegadores), modelé un montón de demos usando DevTools, para eso actuaciones.
En el camino a San Francisco en Smashing Conf, donde realicé un taller de diseño CSS, me dieron acceso a la versión de prueba de Firefox Nightly, que tuvo una implementación temprana de esta propiedad.
Esto significa que necesito rehacer algunas diapositivas para mis presentaciones en mayo, se usarán capturas de pantalla reales allí.
Publiqué un par de capturas de pantalla en Twitter y publicaré todos mis ejemplos en
Grid by Example , tan pronto como la propiedad CSS Grid Subgrid funcione con la bandera en el ensamblaje principal de Firefox Nigtly. Sin embargo, para todos los que tienen cosas más importantes que hacer que mirar Twitter durante el fin de semana, aquí hay algunas capturas de pantalla. Contienen enlaces a ejemplos de
My CodePen para que pueda ver el código de los elementos de la subcuadrícula (subcuadrícula). Destaqué Grid (grid) y Subgrid (subgrid) en Firefox DevTools para ayudarlo a ver lo que necesita ver.
Rejilla para columnas y filas
En este caso, la subcuadrícula se encuentra en las columnas y filas del elemento primario. Esto significa que en la región de la subcuadrícula no hay una cuadrícula oculta, ya que ambos tamaños están vinculados a las pistas disponibles del padre.
CodePen - Cuadrícula para columnas y filasColumna solo malla
En este caso, utilicé una subcuadrícula para las columnas. Esto significa que puedo usar pistas de malla implícitas para agregar tantas líneas como sea necesario para los elementos. Las filas usan su propio tamaño como una cuadrícula anidada sin una subred.
CodePen - Cuadrícula solo de columnaSolo subred
En este caso, hice las subcuadrículas de las filas y definí las columnas, como de costumbre en unidades fr.
Como puede ver, las rutas de las columnas no coinciden con las primarias, porque usan su propia definición de cuadrícula.
CodePen: subcuadrícula solo para cadenasEstoy muy contento de ver el progreso en el desarrollo de CSS Grid Subgrid, así como la oportunidad de hablar sobre ello en mis seminarios e informes.
Puede encontrar más información sobre Subgrid en estos enlaces: