Ejemplo práctico: Diseño de tres columnas

code

HTML

<section>

<article>Alicante</article>

<article>Valencia</article>

<article>Castellón</article>

</section>

css

CSS

section {

display: flex;

gap: 20px;

}

article {

flex: 1;

padding: 20px;

border: 1px solid purple;

}

web

Resultado Visual

location_city

Alicante

location_city

Valencia

location_city

Castellón

lightbulb

Ventajas de este diseño

  • • Las tres columnas tienen el mismo ancho automáticamente
  • • Se ajustan al tamaño del contenedor
  • • Misma altura para todas las columnas