Cómo crear 3 columnas con CSS

Puedes usar este código CSS para crear un diseño de tres columnas. Solo tienes que añadir el HTML apropiado para crear la estructura de las columnas en tu documento HTML.

Aquí tienes un ejemplo de código CSS para crear un diseño de tres columnas:

.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex-basis: 30%;
  padding: 20px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

/* Opzionale: regola il layout per dispositivi mobili */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .column {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
}

 

Puedes usar este código CSS para crear un diseño de tres columnas. Simplemente agrega el HTML apropiado para crear la estructura de las columnas en tu documento HTML.

Por ejemplo, aquí tienes un ejemplo HTML sencillo que usa el diseño de tres columnas:

<div class="container">
  <div class="column">
    <h2>Colonna 1</h2>
    <p>Contenuto della colonna 1</p>
  </div>
  <div class="column">
    <h2>Colonna 2</h2>
    <p>Contenuto della colonna 2</p>
  </div>
  <div class="column">
    <h2>Colonna 3</h2>
    <p>Contenuto della colonna 3</p>
  </div>
</div>

Pubblicato in HTML & CSS