Hacer un diseño de varias columnas en CSS es un proceso relativamente simple y directo. Antes de comenzar, es importante tener en cuenta que los diseños de columnas son especialmente útiles cuando se trata de presentar contenido en bloques discretos de información.
Aquí se describe cómo se puede hacer:
HTML:
```
CSS:
```
/* Style the row */
.row {
display: flex;
}
/* Style the columns */
.column {
flex: 1;
padding: 10px;
border: 1px solid black;
}
```
El código CSS anterior hace las siguientes cosas:
- La propiedad “display: flex” en la clase “.row” establece un contenedor flex, lo que significa que sus hijos (las columnas) se disponen en una línea y son elementos flexibles.
- La propiedad “flex: 1” en la clase “.column” distribuye el ancho disponible entre las columnas por igual. Esta propiedad es una abreviatura de las propiedades “flex-grow”, “flex-shrink” y “flex-basis”. El “1” es el valor “flex-grow”, que define el factor de crecimiento para la columna.
- La propiedad “padding: 10px” añade un relleno de 10px a todos los lados de las columnas.
- La propiedad “border: 1px solid black” añade un borde de 1px de ancho, sólido y negro a las columnas.
