Building a website with a grid layout and components

Contents

You are looking for a way to create a website with a grid layout? You won’t start all over with one of the old CMS which force you into a certain technology stack? In this tutorial we will guide you through the creation of a grid layout using Storyblok right after you’ve done the quickstart using the rendering service - if you’ve choosen the API/SDK version you can still have a look at this tutorial since only the source code for the Grid and Columns will be different.

Why do we want a grid?

Initially, the trend, after the first iPhone was launched, was to build separate sites depending on whether a person visits the site from desktop or a mobile device. At first it seams easier from a development perspective, but only one of the downsides was the increasing maintenance costs because you simply doubled your website.

The main points for developing a responsive website are:

2010, Web designer Ethan Marcotte first introduced the term “responsive design”, you can read more about it in an article of him and since than the idea went from a static second version to completely flexible and fluid layout that adapt to almost any screen.

You can save yourself and your customer time during:

  1. Prototyping
  2. Development
  3. Maintenance

Setting up a grid component in Storyblok

Check out our tutorial on how you can structure your content in Storyblok.


About the author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.


More to read...