Question

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

Answer 1

To create a 3-column card layout with different content and styles for each column, you can combine HTML and CSS as shown in the following example:

 

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    <p>This is the content for card 1.</p>
    <!-- Add specific styles for card 1 -->
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p>This is the content for card 2.</p>
    <!-- Add specific styles for card 2 -->
  </div>
  <div class="card">
    <h3>Card 3</h3>
    <p>This is the content for card 3.</p>
    <!-- Add specific styles for card 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;
}

 

 

In this example, each card has its own unique content enclosed within the respective <div> with the class "card". You can customize the content and styles for each card by modifying the HTML and adding specific styles in CSS.

 

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