Comment créer 3 colonnes avec CSS

Vous pouvez utiliser ce code CSS pour créer une mise en page à trois colonnes. Il suffit d’ajouter le HTML approprié pour créer la structure des colonnes dans votre document HTML.

Voici un exemple de code CSS pour créer une mise en page à trois colonnes :

.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;
  }
}

 

Vous pouvez utiliser ce code CSS pour créer une mise en page à trois colonnes. Il suffit d’ajouter le HTML approprié pour créer la structure des colonnes dans votre document HTML.

Par exemple, voici un simple exemple HTML qui utilise la mise en page à trois colonnes :

<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