Banco de maquetación CSS
Cambia entre Flexbox y Grid en el mismo contenedor, ajusta las propiedades del contenedor y de los elementos, lee el modelo de caja de cada elemento al estilo DevTools y copia el CSS del contenedor y de los elementos.
Banco de maquetación CSS
Cambia entre Flexbox y Grid en el mismo contenedor, ajusta las propiedades del contenedor y de los elementos, lee el modelo de caja de cada elemento al estilo DevTools y copia el CSS del contenedor y de los elementos.
Cómo funciona el banco de maquetación
Flexbox y Grid en el mismo contenedor
Cambia el modo en la parte superior y los mismos elementos se reorganizan con el otro modelo. Flexbox controla el eje principal y el transversal; Grid muestra líneas numeradas para colocar un elemento de la línea 1 a la 3. Cada modo guarda su propia configuración del contenedor, así puedes comparar las dos respuestas a la misma pregunta de maquetación.
Cada elemento expone su modelo de caja
Haz clic en un elemento y despliega su modelo de caja para ver el diagrama al estilo DevTools con los tamaños medidos de content, border-box y margin-box. Cambia padding, border, margin o box-sizing y observa cómo reacciona la maquetación; la regla de ese elemento en la salida CSS recoge las mismas declaraciones.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Dónde quedaron el playground de Flexbox, el de Grid y el visualizador del modelo de caja?
Son los dos modos y el panel de modelo de caja por elemento de este banco. Las direcciones anteriores siguen funcionando y abren el banco en el modo correspondiente; la del modelo de caja abre el modo flex con el modelo de caja del primer elemento desplegado.
¿Por qué los tamaños del modelo de caja se miden en lugar de escribirse?
En una maquetación real el tamaño del elemento viene del contenedor, de su flex-basis o de las pistas del grid, no de un width que escribas. Medir la caja renderizada es lo que hace DevTools y muestra exactamente cómo box-sizing cambia lo que hacen tu padding y tu border con ese tamaño.
¿Se envía algo a un servidor?
No. La vista previa, las mediciones y el CSS se calculan en tu navegador; no hay cuenta, ni subida, ni historial guardado.