Tutorial Interactivo: Flexbox y Grid

Aprende jugando con las propiedades CSS más poderosas

¿Qué es Flexbox?

Flexbox es un modelo de diseño unidimensional que permite organizar elementos en filas o columnas de manera flexible y eficiente.

Controles Flexbox

10px

Vista Previa:

1
2
3
4
.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

¿Qué es Grid?

CSS Grid es un sistema de diseño bidimensional que permite crear layouts complejos con filas y columnas de manera precisa y flexible.

Controles Grid

10px

Vista Previa:

1
2
3
4
5
6
.contenedor {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            grid-template-rows: auto;
                            justify-items: stretch;
                            align-items: stretch;
                            gap: 10px;
                            }