Creating Cards With Grid Layout

Very simple and fast way to create a grid of cards (even if the number of those cards is not even).

In this article, I would like to show you a very easy way to create a card’s grid layout that you can use for example for an e-commerce website or just a blog, as a list of articles.

HTML code

Before looking at the details, let’s see the structure of our HTML and how it is done.

<div class="card-grid">
  <div class="card-style">
    <img src="../assets/cat.jpeg" class="image-style" />
    <div class="card-content">
      <h2>Text here</h2>
      <p>Here you can see a short description of this card.</p>
    </div>
    <div class="card-bottom">
      <b-button class="btn-primary">See more</b-button>
    </div>
  </div>
</div>

The main div is the card-grid, that is where we display all our cards. The next element is the card-style(card-body), here we show the whole card’s style.

Inside the card-body, there is an image, text with title and the button.

Card body

The first thing to do is of course to create the card body. The design of course depends on you but we will take a look at the classic one — white background, black text, and an image.

To create a very nice-looking card, it is important to use such things as border radius and shadows. This will make our card look less sharp and rude on the website.

Here is the CSS for the card body:

.card-style {
background-color: white;
height: 450px;
width: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
color: black;
text-align: left;
}

The other important element of the card’s style is the width and the height. That will make all our cards the same size.

Image

Image is another quite important element of the card. We all know how to display an image but in this situation, all the images of all the cards have to be equal in the size.

For that, we will use an object-fit. It will crop our image by the width and the height that we want.

.image-style {
height: 250px;
width: 350px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Please note that here we are using the border-top-left(right)-radius in order to have the upper borders of our image be the same as the style of the card.

Card Content

The card content can depend actually on the size of the card and its main purpose. If you are not sure about the content that you will get and you think that there is a risk that it can break the whole structure of the card, you can set the height of the content.

.card-content {
padding: 15px;
height: 100px;
text-overflow: ellipsis;
}

And don’t forget the “text-overflow”, which can add the “…” at the end of the text if it is too long for the card.

Grid

The final step is the grid. Let’s just set all of these cards in order.

As for me, the best way to organize the order of the cards and to make them responsible is to use Grid instead of Flex. Why? well, when the number of the cards is not even, everything still stays in the same order.

.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 1rem;
}

With the help of the grid, we set 3 columns for our cards’ layout and defined a gap between them.

And voilà the result (the example of 3 cards) 😊

I hope it was helpful. Thank you for reading. 👍