How to create cards on a grid with CSS

Recently I've heard people having trouble creating cards on a grid in css, so I decided to make a quick tutorial to show you how to do that.

First you'll want to create a div to be the container for the grid and connect your css file to your html file or react component if you're using react.

<div class="cardContainer">



</div>

Let's go ahead and add some cards into our container.

<div class="cardContainer">
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
    <div class="card"><h2>Hello I'm a card</h2></div>
  </div>

Next open your css file and set your display to grid, create margin spacing, and create your grid columns.

.cardContainer {

    margin: 100px 100px 100px 100px;
    display: grid;

    /* you can change the 4 below to 3 if you only want 3 cards per row */
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
}

Now you'll want to style your cards. You can make them any size you want, heres an example of some cards.

.card {
    width: 300px;
    height: 200px;
    color: white;
    background-color: red;
    text-align: center;
 }

Cool now we have some cards on a grid. Play around with the sizing and see what you can create!

Blog

How to create cards on a grid with CSS

Joelle

Join Our Newsletter. No Spam, Only the good stuff.

Related