Card-Grid

The first and easiest grid you can create is a card grid. It is a grid meant for an archive page where you are showing a list of post cards. It can be used also for galleries and any area where you want to show same sized items.

The main thing about card-grid is this: All the card will be the same size.

This grid makes even sized cards using CSS Grid. The items will fit on the grid and if they can’t they will go down to the next row automatically, readjusting the entire grid.

The items have a default min-width of 350px. This means if there is not enough room for 4 cards of 350px to fit on one line, the last one will drop to the next row, and the top three will stretch to fit. There is also one media query which is used when the device has a width that is smaller than the min-width of the cards (350px). It fixes the cards and makes them display in one column.

How it Works

Card-grid uses CSS Grid with a grid-template-columns of auto-fit. This is a special property which will autofit your elements onto the grid. the css looks something like this.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 30px;
    justify-content: center;
}

The code above tells it to make a grid of items, with no exact specified amount of columns. Instead we tell it to make columns as necessary based on 350px. It figures out how many can fit on one line and displays them accordingly. 

The items are responsive and will grow and shrink as needed, so be aware if you have only 2 items they may stretch out to fill the entire row. One item may even take up one whole row! 

How to use

It’s really easy to use. Just place .card-grid on your items! Thats it. No columns, no rows, nothing.

<div class="card-grid">
 <div class="item">...</div>
 <div class="item">...</div>
 <div class="item">...</div>
 <div class="item">...</div>
 <div class="item">...</div>
 <div class="item">...</div>
</div>

Changing the min-width

Perhaps you want cards that have a min-width of 500px instead of 350? With sass it’s really easy to change this by making your own card-grid.

You can use the card-grid mixin like this to make a new card-grid:

.new-card-grid {
  @include card-grid(500px); 
}

As you can see it takes a parameter to makes a new card-grid with a new min-width for the cards. In fact there are more parameters:

.new-card-grid {
  @include card-grid($min: 350px, $max: 1fr, $grid-gap: $gap, $auto-type: auto-fit);
}

You can use this to make any sort of card grid your heart desires. Auto-type can be either auto-fit or auto-fill. The difference is that auto-fill wont stretch the items out if there is extra room for another card (whether it exists or not).

Card-grid-fill

There is a class of .card-grid-fill which is the same as card-grid but uses the auto-fill. If you need auto-fill, you can use that if you want, or create your own. Card-grid-fill will not stretch out the cards if there is enough room for more. So even if there is only one card it wont stretch out see below.

<div class="card-grid-fill">
 <div class="item">...</div>
</div>

If you change the class above from card-grid-fill to card-grid the one card WILL stretch to fill the row.