Tag: cards

Hello,

To display 3 cards next to each other using CSS flex, you can use the flex-wrap property with a value of wrap, combined with the flex property to set the size of each card. Here is an example:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
  <div class="card">Card 7</div>
  <div class="card">Card 8</div>
  <div class="card">Card 9</div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex-basis: calc(33.33% - 10px); /* Set the width of each card to one-third of the container minus some margin */
  margin-right: 10px; /* Add some margin between the cards */
  margin-bottom: 10px; /* Add some margin below the cards */
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

In this example, the card-container element is set to display: flex, which makes its child elements align horizontally in a row. The flex-wrap: wrap property allows the cards to wrap onto the next row when there isn’t enough space for them all to fit on one row. The flex-basis property is used to set the width of each card to one-third of the container minus some margin, and the margin-right and margin-bottom properties add some spacing between the cards. The box-sizing: border-box property ensures that the padding of each card is included in its width calculation.

Source: AI Interaction Channel

Happy Learning!