<div class="card-container">
<div class="card"><h3>Card 1</h3><p>Some content for card 1.</p></div>
<div class="card"><h3>Card 2</h3><p>Some content for card 2.</p></div>
<div class="card"><h3>Card 3</h3><p>Some content for card 3.</p></div>
<div class="card"><h3>Card 4</h3><p>Some content for card 4.</p></div>
</div>
* {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
box-sizing: border-box;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* Space between cards */
padding: 1rem;
}
.card {
background-color: #e9e9e9;
padding: 1.5rem;
border: 1px solid #ccc;
border-radius: 8px;
flex-basis: 100%; /* Default: 1 column for smallest screens */
box-sizing: border-box;
text-align: center;
}
.card h3 {
font-size: 20px;
font-weight: 500;
}
/* Small devices (tablets, 600px and up) */
@media (min-width: 600px) {
.card {
flex-basis: calc(50% - 0.5rem); /* 2 columns, accounting for gap */
}
}
/* Medium devices (desktops, 900px and up) */
@media (min-width: 900px) {
.card {
flex-basis: calc(33.333% - 0.67rem); /* 3 columns */
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.card {
flex-basis: calc(25% - 0.75rem); /* 4 columns */
}
}
