CSS Flexbox #14: How to Build a Card Layout in Flexbox

| Web Design

Card designs are very popular all over the web. You see them on social media sites and online shops.

They are so popular as they present information clearly and understandably.

This tutorial will explain how to create a card layout with CSS Flexbox.


Step #1. Create the HTML

  • Open the code editor of your liking
  • Create an empty HTML file
  • Visit this page, copy the HTML code and save the file

The whole content of each card is wrapped in a link tag, that way the user will be redirected when clicking/tapping on any part of it.

The whole content of each card is wrapped in a link tag


Step #2. The Basic CSS Styles

It’s time to create some basic styling.

  • Create a CSS file called style.css (already linked in the HTML file)
  • Type this code:
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Typography */

body {
    font-family: sans-serif;
}

/* Header Styles */

.header {
    background-color: rgb(4, 25, 94);
    height: 5em;
    border-bottom: 5px solid rgb(60, 127, 172);
}

h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: x-large;
}

.main {
    width: 100%;
    background-color: rgb(197, 196, 196);
}

.card-container {
    width: 90%;
    margin: 0 auto;
    padding: 0.5em 0;
    background-color: rgb(0, 0, 0);
}

.city {
    width: 90%;
    margin: 0.5em auto;
    background-color: rgba(31, 31, 31, 0.95);
    border: 2px solid rgb(173, 223, 169);
}

.city-image,
.description {
    width: 90%;
    margin: 0 auto;
}

.city-image {
    padding: 1.2em 1em;
} 

.description {
    padding: 1em 2em;
}

.city-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

a {
    color: white;
    text-decoration: none;
    font-family: sans-serif;
}

.description h2 {
    padding-bottom: 0.5em;
}

Type this code

The card-container div is 90% wide compared to its parent container (main). It has been horizontally centered using the margin: 0 auto property. The same happens with its child containers (city).

This is almost everything you have to do, to code the mobile layout. The title on the header will be centered with Flexbox.


Step #3. The Flexbox Styles

Let’s center the title on the header section.

  • Edit the CSS code:
/* FLEXBOX STYLES */ 

.header { 
display: flex; 
align-items: center; 
justify-content: center; 
}

Edit the CSS code

The mobile layout is ready. In order to code the other two layouts, you have to write 2 media queries. The first one between 640px and 1000px and the second one from 1001px upwards.


Step #4. The Media Queries


Tablet Layout

  • Edit the CSS code:
.card-container { 
display: flex; 
flex-flow: wrap; 
}

Edit the CSS code

You have turned the card-container into a flex container and all its children items into flex items. The default flex-direction value is row (not included in the flex-flow declaration). It is necessary to assign a flex-basis value (ideal size) to each one of the city containers, as you already learned in the 6th tutorial of this series.

  • Edit the CSS code:
.city { 
flex: 1 0 48%; 
margin: 1%; 
}

Each city item now has a flex-grow value of 1, that means they are going to grow at the same proportion if there is enough space available. Their flex-shrink value is 0, that means that items will not shrink at all. Each item has a flex-basis value of 48% of the width of the flex container. That way you assure that every row will have always two cards.

Each item has a flex-basis value of 48% of the width of the flex container


Desktop Layout

To code the desktop layout, you have to add another media query, so you can have 3 columns in your card design instead of 2.

  • Edit the CSS code:
@media (min-width: 1001px) { .city { flex: 1 0 31%; } }

Edit the CSS code

As you can notice, the last card spans over the whole width of the flex container. That is because you declared a flex-grow factor of 1. Let’s target this card individually.

  • Edit the CSS code inside the media query:
.city:last-of-type { flex-grow: 0; }

Edit the CSS code inside the media query


With Floats

Hint: you do not have to code this part. It’s only a demonstration of how this layout would look if you try to code its floating elements.

  • The CSS code:
@media (min-width: 640px) { 

/* WITH FLOATED ELEMENTS */ 
.city { float: left; width: 49%; } 
.city:last-child { clear: left; } 
.card-container { overflow: auto; } }

The CSS code

The CSS code

By now you already have realized the advantages of working with Flexbox instead as with floats. Thanks for reading, stay tuned for more Flexbox content!


Previous tutorials in this Flexbox series


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.