Make websites look beautiful on any device and overcome complex grid layouts. In five projects we'll cover flexbox, float, grid, nesting, building forms and more.

CSS Grid Layout: 5 Practical Projects

Preface

CSS Grid is a new hot trend in web development these days. Forget about table layouts and floats: a new way to design websites is already here! This technology introduces two-dimensional grids which define multiple areas of layout with a handful of CSS rules. Grid can make third-party frameworks such as 960gs or Bootstrap grid redundant, as you may easily do everything yourself! This feature is supported by all major browsers , though Internet Explorer implements an older version of the specification.

Redesigning a Site to Use CSS Grid Layout

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.

Redesigning a Card-based Tumblr Layout with CSS Grid

In a previous article we explored four different techniques for easily building responsive grid layouts. This article was written back in 2014 before CSS Grid was available so in this tutorial, we'll be using a similar HTML structure but with modern CSS Grid layout.

Easy and Responsive Modern CSS Grid Layout

It can be difficult to achieve complex, yet flexible and responsive grid layouts. Various techniques have evolved over the years but most, such as faux columns , were hacks rather than robust design options.

Progressively Enhanced CSS
      Layouts from Floats to Flexbox to Grid

Form design is a fundamental yet frustrating part of web design and development. Ask anyone who's ever tried to style a  box or align a label consistently in all browsers.

Community Questions