Building a website with a grid layout and components

    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    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.