Solving Problems With CSS Grid and Flexbox: The Card UI

Solving Problems With CSS Grid and Flexbox: The Card UI


What We’re Going to Construct

On this CSS Grid and Flexbox tutorial we’re going to construct this card UI (take a look at the total web page model for a clearer thought):

At numerous breakpoints the cardboard association will change as follows:

Breakpoints of CSS Grid layout
1: small, 2: medium, 3: giant viewport

CSS Grid vs. Flexbox

When Flexbox hit the CSS scene cries of pleasure could possibly be heard the world over; lastly we had a format module to unravel all our float frustrations. However that wasn’t really the case. Flexbox works greatest to distribute components alongside a single axis; both horizontally alongside a row, or vertically as a column. Constructing a very fluid grid with Flexbox is troublesome.

Grid, nevertheless, is supposed for laying out components throughout two axes (or dimensions); horizontally and vertically.

On this tutorial we’re going to make use of each for the aim it was supposed, giving us a very stable resolution. Let’s start!

Card UI Inspiration for This Tutorial has gone clear and spacious with it card UI design. Ignoring the depressing headlines, this appears to be like nice. card ui card ui card ui example

The highest playing cards are constructed and aligned throughout the row with Flexbox, however we’re going to increase on the format utilizing Grid.

One other very good card UI instance constructed with Flexbox is the Blockbox template assortment, out there along with your Envato Components subscription and for $12 on Themeforest. It comes with a great deal of web page demos, a lot of which use card UI patterns, and all of that are able to go, out of the field.

Blockbox Template Dwell Demo

blockbox html5 template exampleblockbox html5 template exampleblockbox html5 template example
Blockbox Responsive Multi Goal HTML5 Template

1. Our Card Markup

Let’s start with a wrapper for our grid <div class="band">, some grid objects to rearrange every thing <div class="merchandise">, and a few anchors (every anchor will probably be a card):

Place as many playing cards as you want; we’re utilizing seven. Every one has a thumbnail <div class="thumb"> which we’ll give a background picture in a while. Then there’s an <article>, which in flip homes an <h1>, a <span> for the creator, and maybe even a <p> for some extra data.

2. CSS Grid Format Fundamentals

Now let’s kick off some kinds by arranging every of these things in a grid. 

We’ll go cell first right here, so the primary kinds will give our wrapper a width and middle it, then set some Grid guidelines:

Most significantly, right here we’re stating that our .band will probably be show: grid;. We then declare grid-template-columns of 1fr, which says that every column will take up a single fraction of these out there. We’ve solely declared one for now, so every column will fill the entire width.

Then we state grid-template-rows: auto;. That is really the default worth, so we may have omitted it, and signifies that the row heights will probably be decided purely by the content material.

Lastly we outline a grid-gap of 20px, which provides us our column and row gutters.

Media Question Numero Uno

On wider viewports (500px is totally arbitrary), we’ll change the grid-template-columns to offer us a doable two playing cards per row. Now there are two columns, every being one of many out there two fractions.

Media Question Numero Dos

Lastly, for bigger screens we’ll go together with a 4 column format.

Right here we may equally have written repeat(4, 1fr) as an alternative of 1fr 1fr 1fr 1fr. For extra data on how the fr unit works, take a look at CSS Grid Format: Fluid Columns and Higher Gutters.

So what has that given us?

3. Styling the Playing cards

That’s given us a reasonably stable grid format, and for those who’re a fan of brutalism you might need to hold issues like this, however for everybody else let’s make our playing cards look slightly extra like playing cards.

We’ll begin with this:

This offers us some primary kinds: a white background, no underline for the textual content, a grey colour, and a neat box-shadow to offer us some depth.

Subsequent we declare the cardboard to be show: flex;. That is essential–we’ll be aligning the contents of the cardboard vertically, utilizing Flexbox. Subsequently we additionally state flex-direction: column; to offer us our vertical axis.

Lastly we declare min-height: 100%; so that all of the playing cards fill the peak of the father or mother (our grid merchandise). Good work! That provides us this:

Hover State

Let’s make a few different enhancements earlier than diving additional into Flexbox. Add a place: relative; and a transition in order that we are able to transfer the cardboard on hover:

Then on the hover, elevate the cardboard barely and make the shadow extra pronounced:


Now we’ll add some basic kinds to the typography to change the colours and the spacing.

Right here’s what it’s best to have:


Every thumbnail will probably be utilized as a background picture, so we’ll add some markup throughout the board, like this:

Now we’ll ensure that the .thumb divs have some dimensions, and that the background photographs fill them correctly:

Good job, that provides us this:

4. Flexbox Article

Now we wish the creator title to be aligned on the backside of the cardboard, no matter how a lot content material there may be above it. That is the place Flexbox once more is available in:

We’re utilizing the shorthand flex: 1; to state that this flex merchandise (it’s nonetheless a baby of the unique flex container) ought to develop to take up all of the out there area.

Then, we declare that the article is a flex container in its personal proper, and once more we’re declaring flex-direction: column; to offer us vertical distribution. Lastly, justify-content: space-between; states that each one the flex objects inside it needs to be unfold evenly alongside the axis, with equal spacing between.

That’s all nice, nevertheless it offers us these unusual, wandering paragraphs in the course of our playing cards.

To align these correctly, let’s add flex-grow: 1; (or just flex: 1;) to them, so that they fill all of the remaining vertical area, aligning themselves properly to the highest.


5. Altering the CSS Grid

At this level we’re just about wrapped up, however the one factor Grid permits us to do now could be fully change the format by inserting our grid objects wherever we like, and at no matter dimension we like. For this demo, we needed to make the very first card (let’s name it our “featured card”) two columns huge for something apart from the smallest viewports.

In our first media question, let’s do that:

Reminiscent of our introductory tutorial on grid areas, right here we’re saying that, past 500px, the primary merchandise ought to start on grid line 1 and span throughout two tracks. The remainder of the grid objects fall into place mechanically.

Inside this similar media question I’ve additionally bumped the font-size of the heading in our featured card.


This has been a stable CSS Grid and Flexbox tutorial; Grid dealt with our important two-dimensional format, then Flexbox dealt with the vertical distribution of components inside our playing cards. Have enjoyable enjoying round with this card UI design!

Additional Studying


We will be happy to hear your thoughts

Leave a reply

Enable registration in settings - general