{"id":139760,"date":"2018-12-03T11:42:21","date_gmt":"2018-12-03T11:42:21","guid":{"rendered":"https:\/\/getflywheel.com\/?p=26877"},"modified":"2025-11-25T09:45:07","modified_gmt":"2025-11-25T15:45:07","slug":"card-layout-css-grid-layout-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/card-layout-css-grid-layout-how-to\/","title":{"rendered":"How to Create a Card Layout Using CSS Grid Layout"},"content":{"rendered":"\n

Editor’s note: This guest post was written by Abbey Fitzgerald<\/a>, a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

CSS Grid Layouts are changing the way web designers work, allowing for a more efficient way of laying out website content. <\/p>\n\n\n\n

It’s been long awaited, but finally this approach has really taken off, and in many cases, it is in production. It hss revolutionized the way websites are designed and, once designers get the hang of it, it will give more flexibility<\/a> to web layouts.<\/p>\n\n\n\n

If you\u2019ve tried designing with CSS Grid<\/a> and have checked out tutorials on the web<\/a>, you may have found information that pertains to an overall layout approach. Things like: header, content, footer, etc. <\/p>\n\n\n\n

However, CSS Grid can also be useful for other website details, such as cards. Card layouts<\/a> are a common way of displaying content, and they can be efficiently created with CSS Grid. By using this method, card content areas are easily repeatable, can be viewed on many different device types, and the size is easily controlled.<\/p>\n\n\n\n

CSS Grid Layout Tools<\/h2>\n\n\n\n

As you\u2019re going along, you\u2019ll want to inspect things on the page. Firefox has great developer tools for seeing grid areas. Using Firefox developer tools<\/a>, you can see an overlay that outlines the grid. Firefox Developer Edition also has this ability.<\/p>\n\n\n\n

\"card<\/figure>\n\n\n\n

Select the Overlay Grid you want to display (depending on your design, there can be more than one). The Grid Display Settings allow you to take a closer look by displaying the line number, area names, and how you want the lines to extend. This will be helpful as you design.<\/p>\n\n\n\n

Simple Cards With CSS Grid Layout<\/h2>\n\n\n\n

If you\u2019re new to CSS Grid, you\u2019ll want to brush up on the basics and create a simple CSS Grid Layout<\/a>. Cards are great a great way to display content, as well as an interesting UI element that\u2019s intuitive to use. <\/p>\n\n\n\n

They also provide a great format for users to quickly scan content and engage with what they\u2019re most interested in. Cards also allow designers to format content in a visually appealing way, with great imagery, intro content, links, and more! <\/p>\n\n\n\n

Cards and Overall Page Layout<\/h3>\n\n\n\n

As an aside, it\u2019s important to know that CSS Grid does not have to be used on an entire page layout. Grids can be used in certain areas of the page if needed. <\/p>\n\n\n\n

Since this is a tutorial on card layouts, a grid approach can be used exclusively here even if the rest of the page does not utilize CSS Grid. As long as the grid area is defined and display: grid;<\/code> is declared on the wrapper, this approach can be used.<\/p>\n\n\n\n

Working With a Set Number of Cards<\/h3>\n\n\n\n

In some cases, it\u2019s easy to plan for a set number of cards. With a set amount of content, the number of cards will stay the same. For example, there may be four cards that explain business offerings, with each offering on its own card.<\/p>\n\n\n\n

\"card<\/figure>\n\n\n\n

For this example (and the others), all the .card<\/code> items are inside a .cards<\/code> container element. To accomplish this, it\u2019s pretty simple.<\/p>\n\n\n\n

[css]\n.cards {\n\ndisplay: grid;\n\ngrid-template-columns: repeat(3, 1fr);\n\ngrid-auto-rows: auto;\n\ngrid-gap: 1rem;\n\n}\n\n&amp;amp;nbsp;\n\n.card {\n\nborder: 2px solid #e7e7e7;\n\nborder-radius: 4px;\n\npadding: .5rem;\n\n}\n[\/css]<\/code><\/pre>\n\n\n\n
It\u2019s important to display the value of .cards<\/code> to grid. Without this, grid areas cannot be created. The next step is to define the grid-template-columns<\/code> and choose the styling. The actual card styling will be declared with a class of .card<\/code>.<\/p>\n\n\n\n
\"card<\/figure>\n\n\n\n
In this example, you\u2019ll see multiple article tags with the class of .card<\/code>. See it on Codepen<\/a>.<\/p>\n\n\n\n
Repeat for Set Number of Cards<\/h4>\n\n\n\n
This is where the cards start taking shape. To create a fluid amount of columns per row, repeat is used with the repeat()<\/code> function. This function takes two arguments: number of times to repeat and the value to repeat.<\/p>\n\n\n\n
\"card<\/figure>\n\n\n\n
For example, grid-template-columns: repeat(3, 200px);<\/code> computes to grid-template-columns: 200px 200px 200px;<\/code>.<\/p>\n\n\n\n
Fractional Unit<\/h4>\n\n\n\n
You\u2019ll see that the example code uses a \u201cfr.\u201d What is that exactly? This unit of measurement became popular with CSS Grid. Fr means \u201cfractional unit\u201d and 1fr<\/code> takes up 1 part of the available space. It helps simplify space calculations.<\/p>\n\n\n\n
Fractional units can be used alone or they allow you to specify a width of 1fr<\/code> and you can add child elements, too. Multiple fr will be equally shared across all child elements.<\/p>\n\n\n\n
\"card<\/figure>\n\n\n\n
Different fractional units can be specified. For example, when grid columns are 1fr 2fr 1fr<\/code>, two fractional units take up twice the space as one fractional unit.<\/p>\n\n\n\n
\"card<\/figure>\n\n\n\n
Repeat for a Dynamic Number of Cards<\/h3>\n\n\n\n
In some cases, you may not know the number of cards needed, so planning for a set number won\u2019t work. The same approach will be taken as it was with repeat but there is the option to fit as many as needed with autofill.<\/p>\n\n\n\n
[css]\ngrid-template-columns: repeat(auto-fill, 250px);\n[\/css]<\/code><\/pre>\n\n\n\n
Width declarations are needed in addition to auto-fill<\/code>. Keen in mind, with a px value, there may be space off to the right when there isn\u2019t enough for the card to fit, but this doesn\u2019t have to be the case, as you will see a bit later.<\/p>\n\n\n\n
\"card<\/figure>\n\n\n\n
Minmax for More Control Over Card Width<\/h4>\n\n\n\n
Minmax is the perfect solution, since a fractional unit by itself would make the cards full width. Adding both repeat and a minmax to the style declaration will get rid of the possible empty space and cards will appear more fluid.<\/p>\n\n\n\n
[css]\ngrid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n[\/css]<\/code><\/pre>\n\n\n\n
\"card
This declaration will tell the browser to fit as many columns based on the sizes specified in the repeat syntax.<\/figcaption><\/figure>\n\n\n\n
Columns will always fit the grid and the cards will be at least 200px. When the minimum space does not perfectly fit the space, this is where the max width comes into play. When another 200px width card won\u2019t fit, the other cards will be larger than 200px, so they stretch to fill the row with more space and it\u2019ll be distributed equally. <\/p>\n\n\n\n
Mobile<\/h4>\n\n\n\n
Since the smallest and largest cards have been planned, this is a good time to talk about mobile. Cards work well on larger and smaller devices because content is in digestible chunks, and the cards can easily scale up and down. CSS Grid helps create a great mobile experience and in some cases, it\u2019s much easier than having a separate media query.<\/p>\n\n\n\n
In this example, cards need to size down to fit in mobile and size up to be a fraction of the space available, so they appear full-width on a smaller device, no separate media query needed:<\/p>\n\n\n\n
[css]\ngrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n[\/css]<\/code><\/pre>\n\n\n\n
The minimum width of the card is 300px. As many 300px cards that can fit will appear in the row. When the device is very small, there\u2019s a good chance that there isn\u2019t the available space for two cards in a row. <\/p>\n\n\n\n
That\u2019s when the 1fr<\/code> comes into play. The fractional unit is great for responsive designs. When two of the 300px cards won\u2019t fit, this is where the mobile view becomes very apparent. When 1fr<\/code> has been declared as the max width, a single card will take up all of the available space and they will stack on top of each other.<\/p>\n\n\n\n
\"css<\/figure>\n\n\n\n
Grid Gap<\/h4>\n\n\n\n
Now that the width of the cards is established, the decision to have space between them needs to be made. <\/p>\n\n\n\n
This property is available on grid containers and it makes it easy to create gutters in the design. Grid-column-gap<\/code> creates the space between each card. When you see grid-gap<\/code>, that refers to the shorthand for grid-row-gap<\/code> and grid-column-gap<\/code>. Grid-row-gap<\/code> is the space on the top and bottom of the card, grid-column-gap<\/code> is the space to the left and right of the card.<\/p>\n\n\n\n
CSS Grid Layout Resources<\/h2>\n\n\n\n
When it comes to CSS Grid Layouts, there is plenty to learn and there are many possibilities. The best way to learn about CSS Grid Layout is to do some additional reading and experimenting. There are many great resources out there, but here are a few to get you started:<\/p>\n\n\n\n