How to Use GreenShift Containers to Build a Website Like a PRO!

Scroll down

Hey techie, what’s up πŸ‘‹? Looking to create something amazing with Greenshift? Yeah, do you? That’s awesome! In this guide I made for you β€” yeah, you 🫡 β€” I’ll teach you EVERYTHING you need to know about Greenshift Containers and how to use them as a pro.

With containers being the bread on which you put the butter, for the web, they are being used everywhere! So, taming them is essential to create a pro-looking website. But how do you even use a container, or better yet, what the FUdge is a container? All these questions will be answered in the content below. So what are you waiting for? Get scrolling πŸ‘‡!

Not sponsor spot
I want to thank my not sponsor, Greenshift. They offer a fantastic free plugin and paid options to extend the awesomeness you can create within WordPress, from a fantastic animation pack to ready-made and SEO-optimized affiliate marketing blocks. Look for the best bundle at GreenShift. Trust me, you won’t regret it!

This post has affiliate links (like the one above this text). If you buy something, I get a teensy-tiny-bit of gadget money. This helps me run this site and create more awesome content. But don’t worry, I only recommend what I use and trust. Thanks for your support! 😊

What are containers?

Containers are the houses where all your content live in. You can fill a container with images, headings, paragraphs, buttons, other containers, and Gutenberg blocks. These are the starting blocks of your website, so I recommend getting familiar with them πŸ˜‰. Below you see the container with a purple border. This container has a Heading, Image, and Text block within. This is all housed within a container.

Example of a container and a few blocks


A text paragraph

The available GreenShift containers

When opening up the Gutenburg blocks panel and search for containers, you’ll see a few containers. Some are the WordPress core containers (the black icons, group, row, and stack). The others are from GreenShift (the blue ones).

Note I have the All-In-One bundle, so I could have more containers than you’ll see.

I mainly use the Container/Wrapper β€” which should be named Container if you ask me. You won’t need the rest for most of your designs.

So you know, two containers in the Gutenburg blocks have preconfigured settings for quick access. These are the CSS grid of containers and FlexBox very nice to have, but they can add to the confusion.

6 Essential container settings

Containers from GreenShift have a vast amount of settings available. Most of them are CSS styles applied to specific blocks. A CSS style (aka setting) is like the paint of a house, the placement of the doors and windows, and the size of the house. You can change them to any shape, color, or place wherever you want to.

There are 5 basic settings you’ll be using almost all the time and 1 container-specific setting. Beginners and CSS gurus alike use these settings. They help you create a nice-looking house where all your content will live.

  • Width β€” the amount of screen width used
  • Height β€” the amount of screen height used (unexpected, huh πŸ€”?)
  • Background β€” the color of the container
  • Spacing β€” margin space on the outside of the container, padding space on the inside of the container
  • Border β€” a visible fence around the container
  • Flex options β€” content arrangement and alignment

These 6 settings allow you to create almost everything you see online. Each setting uses measuring units similar to a meter or foot. Units in web design and -development determine the size of an element, like a container.

The available measuring Units

Web development and web design units have the same principles as any other measuring unit, for instance, meter or foot. They are used to give a number context.

An example of available measuring units within the Greenshift container can be seen in the picture here. With these units, you define how much screen space the container may take up. How much horizontal screen space (width) should the container take up?

The units in question are

  • PX β€” Fixed amount of pixels used. Most used on the web.
  • % β€” Takes up a percentage of its parent.
  • EM β€” Scales with its parent font size.
  • REM β€” Scales with the HTML font size.
  • VW β€” Viewport width, the width of the browser.
  • VH β€” Viewport height, the height of the browser.
  • CH β€” The font’s width of the character 0 (zero, or U+0030).

Flex options

Flexbox and Grid are CSS (Cascading Style Sheet) layout options that allow for more flexible and complex web designs. It solves the tedious way of using tables and divs with floats to create layouts, which is pretty old school nowadays πŸ‘΄. Flexbox and Grid are similar in many ways, for instance:

  • Alignment: They make it easy to align your content horizontally and vertically.
  • Order: Change the order of the blocks inside the container, ignoring the placement within the container.
  • Spacing: Add spacing between blocks with a breeze instead of adding margin and padding to each block.

The main difference is how they behave with the blocks inside the container. Let’s explore what sets them apart.


Flexbox is ideal for creating a layout using its content blocks’ intrinsic size, meaning the size of the block. Sometimes, your blocks will have an unknown size, like two buttons with different text. Flexbox makes it easy to distribute space among blocks and handle items of unknown size.

Example One: Two Buttons In One Row

The two buttons have different text, and the secondary button (find out more) has an icon after the text, which makes the width of both buttons different. Using the Flexbox Row setting puts them on one line, aligning them horizontally.

Then, add a 1em Gap to give the buttons more breathing room.

Example Two: Navigation Bar

The navigation uses the same row and gap as the buttons. To get the logo to the right, the menu in the center, and the button to the right, we set Justify Content to space between.

Example Three: Responsive Card

Manage your Cloudflare DNS

The card below exemplifies a flexboxβ€” the flexbox container is vertically aligned. In the container, I have an image (the Cloudflare logo), heading (Cloudflare), and text (Manage your Cloudflare DNS).

Example Four: Hero section

Apple MacBook Pro
for creatives

Improve your creativity by buying an Apple MacBook Pro and speed up your professional web design.


Grid is great for creating layouts where you want control over the placements of your blocks within a grid. You define how many rows and columns are within a grid and how big they are. Blocks will try and fit in the defined grid. A perfect example is the hero section above. With a grid, creating a 2 column layout with the same size is effortless.

I love to use the grid option because it’s mighty πŸ”¨ and versatile if you understand how you can use it.

Example one: Hero section

Example Two: Three-Column section

Example Three: Magazine Overview

Example Four: Product card

Hostinger is an amazing hosting company. I use their VPS/KVM hostinger offering to host my own Cyberpanel enviroment. This allows me to host multiple subdomains on one hosintg and use N8N for my automation. Check them out.
16.669 reviews

Flexbox and Grid are powerful tools in your CSS toolbox. While Flexbox is designed for one-dimensional layouts, Grid is designed for two-dimensional ones. They can be used separately for simpler layouts or combined for more complex ones. Like the one, you see below. They offer much flexibility and control, making them a great choice for responsive design.

Hostinger is an amazing hosting company. I use their VPS/KVM hostinger offering to host my own Cyberpanel enviroment. This allows me to host multiple subdomains on one hosintg and use N8N for my automation. Check them out.
16.669 reviews
Hostinger is an amazing hosting company. I use their VPS/KVM hostinger offering to host my own Cyberpanel enviroment. This allows me to host multiple subdomains on one hosintg and use N8N for my automation. Check them out.
16.669 reviews

The rest is coming up.

Thanks for reading so far πŸ€—. This is still a work in progress. Let me know if you already have some questions I could seek to answer or tips on improving this article!