In this tutorial, I’m going to show you how to take one of the most common tropes of web design – the card grid – and make it fluid.
We could build this via a float- or flex-based grid and a handful of breakpoints. Why deal with breakpoints if Grid Layout can handle everything for us?
Grid can do so much more than recreating old design patterns. If you’re looking for a good place to start, though, this is the best introduction to its power.
Video: For those who learn by watching
Step 1: Create your markup
In this example, I’ve got a simple card with a title, photo, description and link. I’ve duplicated this markup 10 times to have content to show the grid in action.
Place all the .card items inside a .card-container element.
Practical CSS Grid - Learn about this revolution in Web design!
Whether you're new to CSS Grid or have played with it, finding practical examples of this new layout mechanism is the best way to learn it's power. Sign up below for two hours of practical grid knowledge just for you!Start Learning Now!
Step 2: Visually style your cards
In this case, I chose very simple style elements. You can style your cards however you would like. Keep in mind that your styles and cards should work at multiple sizes, as we’re building a fluid grid. Don’t use direct pixel values to avoid odd spacing.
Step 3: Define your Grid
We’ll start by changing the display value of our .card-container from “block” to “grid.” This will create the grid context for the cards.
Using that context, we’ll define our “grid-template-columns.” This is where the fun begins. We could specify a finite number of columns, but then we’d be in the same situation as a flex or float grid.
Instead, we’ll use the power of some special keywords to create a fluid amount of columns per row.
3A: repeat(repeat value, size value)
First, we’ll use the “repeat()” function. repeat() takes two arguments: number of times to repeat and the value to repeat.
will compute to
Next, instead of specifying a finite number of times to repeat, we’ll use the “auto-fit” keyword. This will tell the browser to have as many columns as will work based on the size specified in the repeat syntax. There’s also “auto-fill” which works the same. The difference between the two is what happens with extra tracks (see Rachel Andrews’ Grid By Example).
3C: minmax(smallest size, largest size)
Replacing the size value in our repeat() function will be a minmax() function. minmax() allows you to specify the smallest and largest you want a track to be.
In our example, we want our cards to be able to size down to fit in mobile (I use 320px for this) and size up to be a fraction of the space available. Thus, our minmax() function will be
Put all this together and you get a CSS declaration block that looks like this:
Step 4: Spacing
We now have a fluid grid, but all our cards are jammed together. Instead of reaching for our old stand-by “margin,” we’ll use another new property: grid-gap.
Grid-gap will place a space between the tracks of our grid (columns and rows). This doesn’t add space around the grid, so we’ll couple that with some padding of our container. Our CSS is now complete and looks like this:
And voila! A fluid, responsive grid created with no breakpoints.
Below is the CodePen that contains this example in its entirety. If you have any questions, post them in the comments or feel free to contact me on Twitter. If you’re interest in implementing Grid and still supporting older browsers, take a look at this post.
See the power of grid in creating different layouts for different screen sizes with the simplest media queries.