Question

How do you create a 3-column card layout with different content and styles for each column?

Answer 1

You can create a 3-column card layout by using a combination of HTML and CSS. Here's an example:

 

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    <p>This is the content for card 1.</p>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p>This is the content for card 2.</p>
  </div>
  <div class="card">
    <h3>Card 3</h3>
    <p>This is the content for card 3.</p>
  </div>
</div>

 

 

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

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

Comments

In this example, the HTML structure consists of three individual <div> elements with the class "card" inside a container <div> with the class "card-container". The CSS code uses flexbox properties to create a 3-column layout with equal spacing between the cards.