Question

How do you create a 3-column card layout using HTML and CSS?

Answer 1

<div class="card-container">
  <div class="card">
    <!-- Card content for column 1 -->
  </div>
  <div class="card">
    <!-- Card content for column 2 -->
  </div>
  <div class="card">
    <!-- Card content for column 3 -->
  </div>
</div>

 

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

.card {
  width: calc(33.33% - 20px);
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 20px;
  border:1px solid black;
  margin:2px;
}

See the Pen column card by Mr Ram (@mrram) on CodePen.