Tutorial CSS: Propiedad 'display'

Comportamiento de elementos block vs inline

En CSS, cada elemento HTML tiene un comportamiento predeterminado que determina cómo se muestra y fluye en la página. Esta característica viene definida por la propiedad display, que establece si un elemento se comporta como block o como inline, entre otros valores posibles.

Elementos de tipo block

Los elementos de tipo block son aquellos que ocupan todo el ancho disponible de su contenedor y generan un salto de línea antes y después de ellos. Esto significa que siempre comienzan en una nueva línea y ningún otro elemento puede situarse a sus lados.

Algunos elementos HTML que son block por defecto:

• <div>
• <p>
• <h1> a <h6>
• <section>
• <article>
• <ul> y <ol>

Veamos un ejemplo básico de cómo se comportan:

<div>Este es un elemento block</div>
<div>Este es otro elemento block</div>

div {
  background-color: #e0f7fa;
  border: 1px solid #00838f;
  padding: 10px;
}

En este caso, cada <div> ocupará una línea completa, uno debajo del otro, independientemente de su contenido.

Elementos de tipo inline

Los elementos inline ocupan solo el espacio necesario para su contenido y no generan saltos de línea. Esto permite que varios elementos inline puedan colocarse uno junto a otro en la misma línea.

Elementos HTML que son inline por defecto:

• <span>
• <a>
• <strong>
• <em>
• <img>
• <button>

Veamos cómo se comportan:

<span>Este es un elemento inline</span>
<span>Este es otro elemento inline</span>

span {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 5px;
}

Ambos elementos <span> aparecerán uno al lado del otro en la misma línea.

Diferencias clave en el comportamiento

Para entender mejor las diferencias entre elementos block e inline, veamos una comparación directa:

• Flujo del documento:

• Block: Siempre comienza en una nueva línea

• Inline: Fluye dentro del texto, sin romper el flujo

• Ancho por defecto:

• Block: Ocupa el 100% del ancho disponible

• Inline: Solo ocupa el espacio necesario para su contenido

• Apilamiento:

• Block: Se apilan verticalmente

• Inline: Se colocan horizontalmente, uno al lado del otro

Podemos ver estas diferencias en acción con el siguiente ejemplo:

<div>Este es un elemento block</div>
<span>Este es un elemento inline</span>
<span>Este es otro elemento inline</span>
<div>Este es otro elemento block</div>

div {
  background-color: #e0f7fa;
  border: 1px solid #00838f;
  padding: 10px;
}

span {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 5px;
}

Cambiando el comportamiento predeterminado

Podemos modificar el comportamiento natural de cualquier elemento usando la propiedad display:

/* Convertir un elemento block en inline */
div.inline-style {
  display: inline;
}

/* Convertir un elemento inline en block */
span.block-style {
  display: block;
}

Este ejemplo muestra cómo cambiar el comportamiento predeterminado:

<div>Elemento block normal</div>
<div class="inline-style">Elemento block convertido a inline</div>
<div class="inline-style">Otro elemento block convertido a inline</div>

<span>Elemento inline normal</span>
<span class="block-style">Elemento inline convertido a block</span>
<span>Otro elemento inline normal</span>

div {
  background-color: #e0f7fa;
  border: 1px solid #00838f;
  padding: 10px;
}

span {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 5px;
}

.inline-style {
  display: inline;
}

.block-style {
  display: block;
}

Comportamiento en el contexto de flujo

El contexto de flujo es otro aspecto importante a considerar. Los elementos block crean su propio contexto de flujo, mientras que los elementos inline participan en el contexto de flujo de su contenedor.

Esto afecta a cómo interactúan con otros elementos:

<p>Este párrafo contiene <span>un elemento inline</span> que se adapta al flujo del texto.</p>
<div>Este div es un elemento block que rompe el flujo.</div>

p {
  background-color: #f1f8e9;
  padding: 10px;
}

span {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 2px;
}

div {
  background-color: #e0f7fa;
  border: 1px solid #00838f;
  padding: 10px;
}

Comportamiento con respecto al espacio en blanco

Otra diferencia importante es cómo manejan el espacio en blanco en el HTML:

• Los elementos inline respetan los espacios en blanco entre ellos en el código HTML
• Los elementos block ignoran los espacios en blanco entre ellos

<span>Primer span</span>    <span>Segundo span</span>

<div>Primer div</div>
    
<div>Segundo div</div>

En este ejemplo, los espacios entre los elementos <span> se mostrarán en la página, mientras que los espacios entre los elementos <div> no afectarán a su visualización.

Anidación de elementos

La forma en que se anidan los elementos también sigue reglas específicas:

• Un elemento block puede contener otros elementos block o inline
• Un elemento inline debería contener solo otros elementos inline (aunque técnicamente puede contener elementos block, esto puede causar problemas de renderizado)

<!-- Anidación correcta -->
<div>
  <p>Este es un párrafo (block) dentro de un div (block)</p>
  <span>Este es un span (inline) dentro de un div (block)</span>
</div>

<!-- Anidación que puede causar problemas -->
<span>
  <div>Este es un div (block) dentro de un span (inline)</div>
</span>

Entender el comportamiento de los elementos block e inline es fundamental para crear diseños web efectivos y predecibles. Estos conceptos básicos son la base sobre la que se construyen técnicas más avanzadas de diseño con CSS.

Propiedades dimensionales en elementos block e inline

Cuando trabajamos con CSS, la forma en que podemos controlar las dimensiones de los elementos varía significativamente dependiendo de si son elementos block o inline. Estas diferencias son fundamentales para entender cómo crear diseños web efectivos.

Dimensiones en elementos block

Los elementos block aceptan todas las propiedades dimensionales y se pueden configurar con valores específicos. Las propiedades principales son:

• width: Define el ancho del elemento
• height: Define la altura del elemento
• min-width/max-width: Establece límites mínimos y máximos para el ancho
• min-height/max-height: Establece límites mínimos y máximos para la altura

.box {
  width: 300px;
  height: 200px;
  min-width: 100px;
  max-width: 500px;
  background-color: #e0f7fa;
  border: 2px solid #0097a7;
}

En este ejemplo, el elemento .box tendrá un ancho de 300px y una altura de 200px, con límites establecidos para que nunca sea más estrecho que 100px ni más ancho que 500px.

Dimensiones en elementos inline

A diferencia de los elementos block, los elementos inline tienen un comportamiento muy distinto respecto a las propiedades dimensionales:

• Las propiedades width y height no tienen efecto en elementos inline
• Las propiedades margin-top y margin-bottom no afectan a la altura ocupada
• Las propiedades padding-top y padding-bottom se aplican visualmente pero no afectan al espacio que ocupa el elemento en el flujo del documento

Veamos un ejemplo que ilustra estas limitaciones:

<span class="inline-element">Este es un elemento inline con dimensiones</span>

.inline-element {
  width: 300px;      /* No tendrá efecto */
  height: 100px;     /* No tendrá efecto */
  margin: 20px;      /* Solo se aplicarán los márgenes horizontales */
  padding: 20px;     /* El padding se aplica visualmente pero no afecta al flujo */
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
}

En este caso, aunque hemos definido un ancho y una altura específicos, el elemento <span> seguirá ocupando solo el espacio necesario para su contenido.

Comparación visual de comportamiento dimensional

Para entender mejor estas diferencias, veamos una comparación directa:

<div class="block-element">Elemento block</div>
<span class="inline-element">Elemento inline</span>

.block-element, .inline-element {
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 15px;
  background-color: #e8f5e9;
  border: 2px solid #66bb6a;
}

En este ejemplo:

• El div respetará todas las dimensiones especificadas
• El span ignorará el width, height y los márgenes verticales

Comportamiento con padding y margin

El padding (relleno interno) y el margin (margen externo) también se comportan de manera diferente:

/* Elemento block */
.block-box {
  width: 200px;
  padding: 20px;
  margin: 30px;
  background-color: #e3f2fd;
  border: 1px solid #2196f3;
}

/* Elemento inline */
.inline-text {
  padding: 20px;
  margin: 30px;  /* Solo se aplicarán los márgenes horizontales */
  background-color: #f3e5f5;
  border: 1px solid #9c27b0;
}

En elementos block, el ancho total ocupado será:

• 200px (width) + 40px (padding izquierdo y derecho) + 2px (bordes) = 242px

Mientras que en elementos inline, el ancho dependerá del contenido, pero se respetarán los paddings horizontales y verticales (aunque estos últimos no afectan al flujo).

Uso de box-sizing para controlar el cálculo de dimensiones

La propiedad box-sizing afecta cómo se calculan las dimensiones finales de un elemento:

.content-box {
  box-sizing: content-box; /* Valor por defecto */
  width: 200px;
  padding: 20px;
  border: 5px solid #ff9800;
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #ff5722;
}

Con content-box (valor predeterminado):

• Ancho total = 200px (width) + 40px (padding) + 10px (border) = 250px

Con border-box:

• Ancho total = 200px (incluye padding y border)

Esta propiedad es especialmente útil para elementos block, ya que facilita el cálculo de dimensiones en diseños complejos.

Dimensiones porcentuales

Los elementos block también pueden usar dimensiones relativas como porcentajes:

.responsive-block {
  width: 50%;         /* 50% del ancho del contenedor */
  max-width: 600px;   /* Nunca más ancho que 600px */
  height: 300px;
  background-color: #fce4ec;
  border: 1px solid #ec407a;
}

Los porcentajes se calculan respecto al contenedor padre, lo que permite crear diseños más flexibles y adaptables.

Dimensiones automáticas

Los elementos block también pueden tener dimensiones automáticas:

.auto-width {
  width: auto;      /* Ocupará todo el ancho disponible (comportamiento predeterminado) */
  height: 100px;
  background-color: #f1f8e9;
  border: 1px solid #7cb342;
}

.auto-height {
  width: 200px;
  height: auto;     /* Se ajustará al contenido (comportamiento predeterminado) */
  background-color: #fffde7;
  border: 1px solid #fdd835;
}

El valor auto es especialmente útil cuando queremos que un elemento se ajuste a su contenido o al espacio disponible.

Dimensiones intrínsecas

CSS moderno ofrece propiedades para trabajar con dimensiones intrínsecas (basadas en el contenido):

.fit-content {
  width: fit-content;  /* Se ajusta al contenido, pero no más ancho que el contenedor */
  max-width: 100%;
  background-color: #e8eaf6;
  border: 1px solid #3f51b5;
}

.min-content {
  width: min-content;  /* Tan estrecho como sea posible sin romper el contenido */
  background-color: #fff3e0;
  border: 1px solid #ff9800;
}

.max-content {
  width: max-content;  /* Tan ancho como necesite el contenido sin saltos de línea */
  background-color: #e0f2f1;
  border: 1px solid #009688;
}

Estas propiedades son útiles para crear diseños que se adapten al contenido de manera inteligente.

Consideraciones prácticas

Al trabajar con dimensiones en CSS, es importante recordar:

• Para elementos que necesitan dimensiones específicas, usa elementos block o cambia el display a inline-block o block
• Si necesitas aplicar dimensiones a un elemento inline sin cambiar su comportamiento de flujo, considera usar display: inline-block
• Utiliza box-sizing: border-box para facilitar el cálculo de dimensiones en diseños complejos
• Combina dimensiones fijas y flexibles para crear diseños adaptables

Entender estas diferencias dimensionales entre elementos block e inline es esencial para crear diseños web coherentes y predecibles, especialmente cuando se trabaja con diseños responsivos.

Funcionamiento de inline-block y sus casos de uso

La propiedad display: inline-block representa un híbrido entre los comportamientos de elementos block e inline, combinando características de ambos mundos. Este valor de display es extremadamente útil cuando necesitamos aprovechar ventajas de ambos tipos de elementos.

Características principales de inline-block

Un elemento con display: inline-block se comporta de la siguiente manera:

• Fluye como inline: Se coloca en línea con otros elementos, sin forzar saltos de línea
• Acepta dimensiones como block: Permite establecer width, height, margin y padding en todas direcciones
• Respeta el box model completo: A diferencia de los elementos inline puros

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
  padding: 15px;
  background-color: #e1f5fe;
  border: 2px solid #03a9f4;
}

Veamos un ejemplo práctico:

<div class="container">
  <div class="inline-block-element">Elemento 1</div>
  <div class="inline-block-element">Elemento 2</div>
  <div class="inline-block-element">Elemento 3</div>
</div>

.container {
  background-color: #f5f5f5;
  padding: 20px;
}

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
  padding: 15px;
  background-color: #e1f5fe;
  border: 2px solid #03a9f4;
  vertical-align: top; /* Importante para alineación */
}

En este ejemplo, los tres elementos se colocarán uno al lado del otro (comportamiento inline) mientras mantienen sus dimensiones específicas (comportamiento block).

Diferencias clave con inline y block

Para entender mejor el valor de inline-block, comparemos los tres tipos de display:

• Block:

• Ocupa todo el ancho disponible

• Genera saltos de línea antes y después

• Acepta todas las propiedades dimensionales

• Inline:

• Ocupa solo el espacio necesario para su contenido

• No genera saltos de línea

• Ignora width, height y márgenes verticales

• Inline-block:

• Ocupa solo el espacio necesario (como inline)

• No genera saltos de línea (como inline)

• Acepta todas las propiedades dimensionales (como block)

Espacios en blanco entre elementos inline-block

Un aspecto importante a considerar cuando trabajamos con inline-block es el espacio en blanco que se genera entre elementos:

<div class="container">
  <div class="inline-block-box">Uno</div>
  <div class="inline-block-box">Dos</div>
  <div class="inline-block-box">Tres</div>
</div>

.inline-block-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #bbdefb;
  border: 1px solid #1976d2;
  text-align: center;
  line-height: 100px;
}

En este ejemplo, aparecerán pequeños espacios entre los elementos debido a que el HTML interpreta los espacios en blanco y saltos de línea entre las etiquetas. Existen varias técnicas para eliminar estos espacios:

• Eliminar espacios en el HTML:

<div class="container">
  <div class="inline-block-box">Uno</div><div class="inline-block-box">Dos</div><div class="inline-block-box">Tres</div>
</div>

• Usar comentarios HTML:

<div class="container">
  <div class="inline-block-box">Uno</div><!--
  --><div class="inline-block-box">Dos</div><!--
  --><div class="inline-block-box">Tres</div>
</div>

• Solución con CSS:

.container {
  font-size: 0; /* Elimina espacios entre elementos */
}

.inline-block-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  font-size: 16px; /* Restaura el tamaño de fuente para el contenido */
  background-color: #bbdefb;
  border: 1px solid #1976d2;
}

Alineación vertical con inline-block

Una ventaja importante de inline-block es el control sobre la alineación vertical mediante la propiedad vertical-align:

.top-aligned {
  display: inline-block;
  vertical-align: top;
}

.middle-aligned {
  display: inline-block;
  vertical-align: middle;
}

.bottom-aligned {
  display: inline-block;
  vertical-align: bottom;
}

Esto es especialmente útil cuando tenemos elementos de diferentes alturas que necesitan alinearse de forma específica:

<div class="container">
  <div class="inline-block-box tall">Alto</div>
  <div class="inline-block-box short">Bajo</div>
  <div class="inline-block-box medium">Medio</div>
</div>

.container {
  background-color: #f5f5f5;
  padding: 20px;
}

.inline-block-box {
  display: inline-block;
  width: 100px;
  background-color: #bbdefb;
  border: 1px solid #1976d2;
  text-align: center;
  vertical-align: middle; /* Alineación vertical */
}

.tall { height: 150px; line-height: 150px; }
.medium { height: 100px; line-height: 100px; }
.short { height: 50px; line-height: 50px; }

Casos de uso prácticos para inline-block

El valor inline-block es particularmente útil en varios escenarios comunes:

1. Creación de menús de navegación horizontales

<nav>
  <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f9fa;
}

.menu li {
  display: inline-block;
}

.menu a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: #495057;
  transition: background-color 0.3s;
}

.menu a:hover {
  background-color: #e9ecef;
}

2. Creación de grids simples

<div class="simple-grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.simple-grid {
  text-align: center;
}

.grid-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 10px;
  background-color: #dcedc8;
  border: 1px solid #8bc34a;
  line-height: 150px;
  font-size: 24px;
}

3. Botones con iconos alineados

<button class="icon-button">
  <span class="icon">🔍</span>
  <span class="text">Buscar</span>
</button>

.icon-button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.icon, .text {
  display: inline-block;
  vertical-align: middle;
}

.icon {
  margin-right: 5px;
}

4. Formularios con campos alineados

<form class="aligned-form">
  <div class="form-row">
    <label for="name">Nombre:</label>
    <input type="text" id="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email">
  </div>
</form>

.form-row {
  margin-bottom: 10px;
}

.form-row label {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

.form-row input {
  display: inline-block;
  width: 250px;
  padding: 5px;
}

Consideraciones de rendimiento

Aunque inline-block es muy útil, hay algunos aspectos a considerar:

• Para layouts complejos, Flexbox o Grid pueden ofrecer más control y menos problemas
• Los espacios en blanco entre elementos pueden ser problemáticos y requerir soluciones adicionales
• El rendimiento puede verse afectado en layouts muy complejos con muchos elementos inline-block

Compatibilidad con navegadores

La propiedad display: inline-block tiene excelente soporte en todos los navegadores modernos. En versiones antiguas de Internet Explorer (IE 6-7), se requería algún hack, pero esto ya no es relevante en la actualidad.

Cuándo usar inline-block vs. otras alternativas

• Usa inline-block cuando:

• Necesites elementos en línea con dimensiones específicas

• Quieras crear layouts simples sin la complejidad de Flexbox o Grid

• Necesites alineación vertical precisa entre elementos

• Estés creando componentes de interfaz como botones, menús o tarjetas en línea

• Considera alternativas cuando:

• Necesites layouts complejos y responsivos (usa Flexbox o Grid)

• Tengas problemas con los espacios en blanco entre elementos

• Requieras más control sobre la distribución del espacio

inline-block sigue siendo una herramienta valiosa en el arsenal de CSS, especialmente para componentes de interfaz y layouts simples donde su comportamiento híbrido ofrece la flexibilidad perfecta entre elementos block e inline.

Valores modernos de display: flow-root, contents, flex, grid

CSS ha evolucionado significativamente en los últimos años, introduciendo valores modernos para la propiedad display que van más allá de los tradicionales block, inline e inline-block. Estos nuevos valores proporcionan soluciones elegantes a problemas comunes de diseño y amplían enormemente nuestras posibilidades de maquetación.

display: flow-root

El valor flow-root crea un nuevo contexto de formato de bloque (BFC), lo que resulta extremadamente útil para contener elementos flotantes sin necesidad de técnicas adicionales como clearfix.

.container {
  display: flow-root;
  border: 2px solid #3498db;
  padding: 10px;
}

Un caso de uso común es cuando tenemos elementos flotantes dentro de un contenedor:

<div class="container">
  <div class="float-left">Elemento flotante</div>
  <p>Texto que fluye alrededor del elemento flotante...</p>
</div>

.container {
  display: flow-root;
  border: 2px solid #3498db;
  padding: 10px;
  margin-bottom: 20px;
}

.float-left {
  float: left;
  width: 150px;
  height: 100px;
  background-color: #e74c3c;
  margin-right: 15px;
  color: white;
  padding: 10px;
}

Antes de flow-root, necesitábamos usar técnicas como:

/* Método antiguo con clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

La ventaja de flow-root es que simplifica el código y elimina la necesidad de clases adicionales o elementos de limpieza.

display: contents

El valor contents hace que el elemento en sí mismo "desaparezca" visualmente, pero sus hijos se renderizan como si fueran hijos directos del contenedor del elemento. Esto es particularmente útil cuando queremos eliminar un elemento contenedor del árbol de renderizado sin eliminar sus hijos.

.wrapper {
  display: contents;
}

Veamos un ejemplo práctico:

<div class="grid-container">
  <div class="wrapper">
    <div class="item">Elemento 1</div>
    <div class="item">Elemento 2</div>
  </div>
  <div class="item">Elemento 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wrapper {
  display: contents; /* Los hijos se comportan como hijos directos de grid-container */
}

.item {
  background-color: #9b59b6;
  color: white;
  padding: 20px;
  text-align: center;
}

En este ejemplo, los elementos 1 y 2 se comportan como si fueran hijos directos del contenedor grid, a pesar de estar dentro de .wrapper. Sin display: contents, el elemento .wrapper ocuparía una celda completa de la cuadrícula.

Este valor es especialmente útil cuando:

• Trabajamos con componentes anidados en sistemas de grid o flexbox
• Queremos mantener la estructura semántica del HTML pero necesitamos un comportamiento visual diferente
• Necesitamos evitar que un contenedor interfiera con el diseño visual

display: flex

Flexbox (o Modelo de Caja Flexible) es un sistema de layout unidimensional que permite distribuir espacio y alinear elementos de forma eficiente, ya sea en filas o columnas.

.flex-container {
  display: flex;
  gap: 10px;
}

Al establecer display: flex en un elemento, este se convierte en un contenedor flex y sus hijos directos se convierten en elementos flex. A diferencia de los valores tradicionales, flex introduce un conjunto completo de propiedades adicionales para controlar el layout:

.flex-container {
  display: flex;
  flex-direction: row; /* row, row-reverse, column, column-reverse */
  justify-content: space-between; /* alineación en el eje principal */
  align-items: center; /* alineación en el eje cruzado */
  flex-wrap: wrap; /* permite que los elementos se envuelvan */
  gap: 10px; /* espacio entre elementos */
}

.flex-item {
  flex: 1; /* crecimiento proporcional */
}

Un ejemplo básico de uso:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
  background-color: #f1f1f1;
  padding: 15px;
  gap: 10px;
}

.flex-item {
  background-color: #2ecc71;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1;
}

Flexbox es ideal para:

• Barras de navegación y menús horizontales
• Centrado vertical y horizontal de elementos
• Distribución de espacio entre elementos
• Ordenamiento visual independiente del orden en el HTML
• Layouts responsivos de una dimensión (filas o columnas)

display: grid

CSS Grid es un sistema de layout bidimensional que permite crear diseños complejos basados en filas y columnas. A diferencia de flexbox, grid está diseñado para manejar tanto filas como columnas simultáneamente.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 15px;
}

Al establecer display: grid, el elemento se convierte en un contenedor grid y sus hijos directos se convierten en elementos grid. Grid introduce numerosas propiedades para definir la estructura:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
  grid-template-rows: auto auto; /* 2 filas de altura automática */
  gap: 15px; /* espacio entre filas y columnas */
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Un ejemplo práctico:

<div class="grid-container">
  <div class="grid-item header">Cabecera</div>
  <div class="grid-item sidebar">Barra lateral</div>
  <div class="grid-item content">Contenido principal</div>
  <div class="grid-item footer">Pie de página</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 300px;
}

.grid-item {
  padding: 20px;
  text-align: center;
}

.header {
  grid-area: header;
  background-color: #3498db;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e67e22;
}

.content {
  grid-area: content;
  background-color: #2ecc71;
}

.footer {
  grid-area: footer;
  background-color: #9b59b6;
}

Grid es especialmente útil para:

• Layouts de página completa
• Sistemas de cuadrícula para galerías o tarjetas
• Diseños asimétricos complejos
• Posicionamiento preciso de elementos
• Alineación en dos dimensiones

Combinando valores modernos de display

Una de las grandes ventajas de estos valores modernos es que pueden combinarse para crear layouts complejos y flexibles:

<div class="grid-layout">
  <header>Cabecera</header>
  <nav class="flex-nav">
    <a href="#">Inicio</a>
    <a href="#">Productos</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </nav>
  <main>
    <div class="card-container">
      <div class="wrapper">
        <div class="card">Tarjeta 1</div>
        <div class="card">Tarjeta 2</div>
      </div>
      <div class="card">Tarjeta 3</div>
    </div>
  </main>
  <footer>Pie de página</footer>
</div>

.grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}

.flex-nav {
  display: flex;
  justify-content: space-around;
  background-color: #34495e;
  padding: 15px;
}

.flex-nav a {
  color: white;
  text-decoration: none;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.wrapper {
  display: contents;
}

.card {
  background-color: #ecf0f1;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header, footer {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}

Soporte en navegadores y fallbacks

El soporte para estos valores modernos varía:

• flow-root: Buen soporte en navegadores modernos
• contents: Soporte decente, pero con algunas limitaciones en Safari
• flex: Excelente soporte en todos los navegadores modernos
• grid: Buen soporte en navegadores modernos

Para proporcionar alternativas en navegadores antiguos, podemos usar:

/* Fallback para navegadores que no soportan grid */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Versión moderna con grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
}

Consideraciones de rendimiento

Cada valor de display tiene diferentes implicaciones de rendimiento:

• flow-root: Rendimiento similar a block
• contents: Puede mejorar el rendimiento al eliminar nodos del árbol de renderizado
• flex: Eficiente para layouts unidimensionales, pero puede ralentizarse con muchos elementos
• grid: Más costoso computacionalmente que flex, especialmente con layouts complejos

Para optimizar el rendimiento:

• Usa el valor de display más simple que resuelva tu problema de diseño
• Evita anidaciones excesivas de contenedores flex o grid
• Considera usar will-change: transform para elementos que cambiarán frecuentemente

Elección del valor adecuado

Para elegir el valor de display más apropiado:

• flow-root: Cuando necesites contener elementos flotantes o crear un nuevo contexto de formato
• contents: Cuando quieras "eliminar" un contenedor pero mantener sus hijos en el flujo
• flex: Para layouts unidimensionales (filas o columnas)
• grid: Para layouts bidimensionales (filas y columnas simultáneamente)

Estos valores modernos de display han transformado radicalmente cómo construimos layouts en CSS, permitiéndonos crear diseños más robustos, flexibles y mantenibles con menos código y sin los hacks que solíamos necesitar en el pasado.