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 👇!
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
heading
A text paragraph
The available GreenShift containers
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
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
Cloudflare
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
Grid
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
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
Hostinger
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!