Demo Containers

WordPress gives us many different blocks we can use to arrange content. Initially it may be tricky to decide which to use. You will probably want to experiment a bit. Peruse the area on the right to play with different styles.

Basic Container

Containers can be laid out in many ways. Below is a screenshot of the options and below that is a container with two rows each with two content areas.

I”ve outlined our container in red and the content areas in blue. You can add any type of block to these sections. You can also put a container in a container if you want. You can adjust padding and margins for the whole container and for the areas within.

Group

A group is like a container but has different layout options.

This group has rows that go across the container. You could also choose columns. And you can put different blocks into each area. This does not give us an option to style the rows with a border. But you could accomplish that by putting a container inside a row.

Columns

Columns are like the other blocks. They give you a few different default column layouts.

You can put a border around the whole area but not around individual columns. But you can put other blocks inside a column.

Rows & Stacks

Rows and Stacks are sort of like columns but with more flexibility. A row gives you side by side content areas. You can keep adding them. And you can change a row into a stack.

In this example I put containers in a row and gave them a width of 28%. They are set to wrap to another to another row when they don’t fit.