CSS: modelo de caja, Flexbox y Grid

Contenido, padding, borde y margen

El contenido está rodeado por padding y borde; margin separa la caja de otras. Con box-sizing: content-box, width mide el contenido y el padding y los bordes se suman al ancho. Con border-box, el ancho declarado incluye contenido, padding y borde; el margen sigue quedando fuera.

.tarjeta {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  border: 1px solid #888;
}

Flexbox para una fila o columna

display: flex convierte a los hijos directos en elementos flexibles. El eje principal depende de flex-direction. justify-content distribuye espacio sobre ese eje y align-items alinea sobre el eje transversal. flex-wrap permite saltar a otra línea cuando falta espacio.

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

Grid para filas y columnas

Grid permite definir columnas y filas de una cuadrícula. repeat y minmax evitan repetir manualmente cada columna. Este ejemplo crea tantas columnas como quepan, con un mínimo que no supera el ancho del contenedor.

.lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

Adaptación y contenido real

Prueba el diseño con títulos largos, una sola tarjeta y muchas tarjetas. Un tamaño fijo puede ser útil para un componente concreto, pero no garantiza que la página se adapte. Evita reordenar visualmente controles de forma que el orden del teclado resulte confuso.

Ejercicio de inspección

1. Crea tres tarjetas dentro de un contenedor con clase lista.
2. Reduce el ancho de la ventana y observa cuántas columnas caben.
3. Inspecciona una tarjeta en las herramientas del navegador y localiza su contenido, padding, borde y margen.