Building a website with a grid layout and components
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:
- Fluid Grids (like the one we use from Bootstrap)
- Media Queries (certain "breakpoints" in your CSS)
- Flexible Images and Media
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:
- Prototyping
- Development
- Maintenance
Setting up a grid component in Storyblok
Check out our tutorial on how you can structure your content in Storyblok.
