Playground de CSS Multicolumn

<article class="multicol">
  <header>
    <p>Diseño editorial con CSS</p>
    <h2>Una guía práctica de CSS Multicolumn</h2>
    <p>Distribuye contenido continuo en columnas sin cambiar el orden del documento ni convertir cada fragmento en un componente independiente.</p>
  </header>

  <section>
    <h3>El flujo sigue siendo natural</h3>
    <p>El navegador llena una columna y continúa en la siguiente. El texto, los encabezados y las listas conservan el mismo orden que tienen en el HTML.</p>
    <p>Este comportamiento funciona especialmente bien en artículos, glosarios y bloques de lectura continua.</p>
  </section>

  <section>
    <h3>Anchura o cantidad</h3>
    <p>column-width propone una anchura óptima y permite que el navegador calcule cuántas columnas caben. column-count fija la cantidad máxima visible.</p>
    <p>El shorthand columns puede combinar ambos valores para conservar una medida legible sin superar el número elegido.</p>
  </section>

  <section>
    <h3>El espacio también comunica</h3>
    <p>column-gap separa los fragmentos y column-rule dibuja una guía visual en el centro de ese espacio sin ocupar anchura adicional.</p>
    <p>Una separación generosa suele ayudar más que una regla demasiado intensa.</p>
  </section>

  <section>
    <h3>Encabezados que cruzan columnas</h3>
    <p>Con column-span: all un encabezado puede interrumpir el flujo, ocupar todo el contenedor y comenzar una nueva línea de columnas debajo.</p>
    <p>Es una herramienta útil para dividir un texto largo en bloques editoriales reconocibles.</p>
  </section>

  <section>
    <h3>Evita cortes incómodos</h3>
    <p>break-inside: avoid intenta mantener cada sección unida. Si no queda espacio suficiente, el bloque completo puede pasar a la columna siguiente.</p>
    <p>Conviene usarlo con moderación porque los bloques altos pueden dejar huecos visibles.</p>
  </section>

  <section>
    <h3>Cuándo elegir Multicolumn</h3>
    <p>Multicolumn está pensado para un único flujo de contenido. Grid y Flexbox son mejores cuando cada pieza necesita su propia colocación.</p>
    <p>Prueba distintos anchos de preview para comprobar cuándo aparece o desaparece una columna sin redimensionar toda la ventana.</p>
  </section>
</article>

<article class="columns-[14rem] gap-[24px] [column-rule:none]">
  <header class="[column-span:all]">
    <p>Diseño editorial con CSS</p>
    <h2>Una guía práctica de CSS Multicolumn</h2>
    <p>Distribuye contenido continuo en columnas sin cambiar el orden del documento ni convertir cada fragmento en un componente independiente.</p>
  </header>

  <section>
    <h3>El flujo sigue siendo natural</h3>
    <p>El navegador llena una columna y continúa en la siguiente. El texto, los encabezados y las listas conservan el mismo orden que tienen en el HTML.</p>
    <p>Este comportamiento funciona especialmente bien en artículos, glosarios y bloques de lectura continua.</p>
  </section>

  <section>
    <h3>Anchura o cantidad</h3>
    <p>column-width propone una anchura óptima y permite que el navegador calcule cuántas columnas caben. column-count fija la cantidad máxima visible.</p>
    <p>El shorthand columns puede combinar ambos valores para conservar una medida legible sin superar el número elegido.</p>
  </section>

  <section>
    <h3>El espacio también comunica</h3>
    <p>column-gap separa los fragmentos y column-rule dibuja una guía visual en el centro de ese espacio sin ocupar anchura adicional.</p>
    <p>Una separación generosa suele ayudar más que una regla demasiado intensa.</p>
  </section>

  <section>
    <h3>Encabezados que cruzan columnas</h3>
    <p>Con column-span: all un encabezado puede interrumpir el flujo, ocupar todo el contenedor y comenzar una nueva línea de columnas debajo.</p>
    <p>Es una herramienta útil para dividir un texto largo en bloques editoriales reconocibles.</p>
  </section>

  <section>
    <h3>Evita cortes incómodos</h3>
    <p>break-inside: avoid intenta mantener cada sección unida. Si no queda espacio suficiente, el bloque completo puede pasar a la columna siguiente.</p>
    <p>Conviene usarlo con moderación porque los bloques altos pueden dejar huecos visibles.</p>
  </section>

  <section>
    <h3>Cuándo elegir Multicolumn</h3>
    <p>Multicolumn está pensado para un único flujo de contenido. Grid y Flexbox son mejores cuando cada pieza necesita su propia colocación.</p>
    <p>Prueba distintos anchos de preview para comprobar cuándo aparece o desaparece una columna sin redimensionar toda la ventana.</p>
  </section>
</article>

.multicol {
  columns: 14rem;
  column-gap: 24px;
  column-rule: none;
}

.multicol header {
  column-span: all;
}

.multicol {
  columns: 14rem;
  column-gap: 24px;
  column-rule: none;

  header {
    column-span: all;
  }
}