Chapter 2: Redesigning a Card-based Tumblr Layout with CSS Grid

by Giulio Mainardi

In this tutorial we're going to re-implement a grid-based design concept inspired by the What're you into? Tumblr page, where the user can select a set of topics to tailor her recommended content.

The tumblr page

Only the visual design of the grid is executed, not the selection functionality, as shown in the Pen we will be building:

Live Code

See the Pen MBdNav.

The main goal is to implement the design with CSS Grid, but a fallback layout with floats is outlined in the Support section below.

Markup

Essentially, the page content consists of list of cards:

<ul class="grid"> ...

Get CSS Grid Layout: 5 Practical Projects now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.