Photo of DeepakNess DeepakNess

Best way to create CSS cards

Unproofread notes

Just noting this for myself for future reference that whenever I have to create cards, I must use this simpler method each time. If the HTML is like this:

<div class="card-container">
    <div class="card">
        <p>Card 1 content</p>
    </div>
    <div class="card">
        <p>Card 2 content</p>
    </div>
</div>

The CSS should be like this:

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 auto;
}

/* and then whatever CSS for .card here */

It's clean and quick.

Comment via email