Conceptos básicos de display: block, inline, flex y grid

La propiedad display es la propiedad de CSS más importante para el diseño. Controla cómo participa un elemento en el flujo de diseño y cómo se organizan sus elementos secundarios. Los valores más utilizados son: block, inline, inline-block, flex, grid y none.

Los elementos de bloque ocupan el ancho completo de su contenedor y comienzan en una línea nueva. Algunos ejemplos son: <div>, <p> y <h1>. Puede establecer el ancho, la altura, el margen y el relleno de los elementos de bloque.

Los elementos en línea fluyen dentro del texto; no comienzan en una línea nueva. Algunos ejemplos son: <span>, <a> y <strong>. El ancho, la altura y los márgenes verticales no tienen efecto en los elementos en línea.

inline-block combina ambos comportamientos: el elemento fluye en línea, como el texto, pero admite ancho, altura y margen vertical, como un bloque. Es útil para botones y distintivos que deben situarse en una línea de texto.

display: none elimina por completo el elemento del diseño: no ocupa espacio. Use visibility: hidden para ocultarlo y conservar el espacio que ocupaba.

display: flex convierte un elemento en un contenedor flex. Sus elementos secundarios directos se convierten en elementos flex que se organizan en una fila (de forma predeterminada) o en una columna. Flexbox es excelente para distribuir el espacio y alinear elementos.

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: espacio entre elementos sin usar margin.

display: grid convierte un elemento en un contenedor de cuadrícula. Defina las filas y columnas con grid-template-columns y grid-template-rows. Grid es ideal para diseños de páginas y cuadrículas de tarjetas.

La unidad fr (fracción) distribuye el espacio disponible. grid-template-columns: 1fr 2fr 1fr crea tres columnas en las que la central obtiene el doble de espacio que las demás.

Use Flexbox para diseños unidimensionales (una fila de botones o una pila de tarjetas). Use Grid para diseños bidimensionales (la estructura de una página o una galería de fotos con filas y columnas explícitas). Ambos pueden coexistir en la misma página.

display: none: elimina el elemento del diseño y los lectores de pantalla no pueden acceder a él. visibility: hidden: lo hace invisible, pero sigue ocupando espacio y permanece en el árbol de accesibilidad. opacity: 0: lo hace invisible, pero ocupa espacio y es accesible.

Necesita diseñar una cuadrícula de tarjetas adaptable con varias filas y columnas. ¿Qué valor de display es el mejor punto de partida?

block ocupa todo el ancho. inline fluye con el texto. inline-block combina ambos comportamientos. flex organiza los elementos secundarios en una dimensión. grid organiza los elementos secundarios en dos dimensiones. none elimina el elemento del diseño. Domine estos valores y controlará todos los diseños de la Web.