Web page layout – with CSS flexbox and Bricks

Related:
Bricks vs Elementor – why we switched
Website Mockup Size Guide

Introduction

This article aims to cover the basics of the technical aspects of laying out a web page.

We will not be discussing design practices per se, but rather things like sections, containers, blocks, rows, columns, widths, margins, padding, and CSS flexbox methods.

The type of layout we will be covering here is the simpler, more traditional type of layout with fixed-width content area, and fixed left and right padding on medium and small devices. 

This article does not cover more advanced techniques like dynamic widths and padding such as those provided by CSS frameworks like Automatic.css and Core Framework.

Bricks vs CSS flexbox

Although we’re using Bricks builder, Bricks makes extensive use of the CSS flexbox model, so by using Bricks you will learn some fundamental native CSS coding techniques along the way. These skills can be used with most modern website builders.

The fundamental structural layout tools in Bricks are the Section, Container, Block, and Div elements. They are designed to assist you to lay out web pages easily, and by following a few fairly simple best practices, the website will respond fluidly across all device sizes.

The Bricks layout elements:
Section, Container, Block, and Div.
The Bricks structure panel, showing:
Section, Container, and Block nesting hierarchy.

Bricks Academy

The Bricks Academy article on this topic – Understanding the Layout –  is excellent, and dives straight into the base concepts. We highly recommend reading it before continuing to read this article. In particular we’re going to borrow this table from that article as a quick overview of the layout elements:

Element TagDisplayWidthWhere To Use
Sectionsectionflex100%Root level
Containerdivflex1100pxInside Section
Blockdivflex100%Inside Section, Container, or another Block
DivdivblockAnywhere

We made a small modification to the table. For the Block element, under “Where to Use” we added “or another Block” to indicate the fact that Blocks can be nested inside each other.

In our article we’ll jump into some common real world examples, showing where each type of layout element should be used.

Planning the page structure

A web page is constructed using a series of nested blocks, most of which are not visible to the end user. When building a web page, a web developer plans the structure of the page in advance.

We will start by discussing the Section element, which divides a page into distinct topics, represented visually as rows on a page.

Websites generally have a content width, which is a set width to ensure lines of text don’t get too wide, or to prevent elements from touching the sides of the screen. See this article for a detailed explanation. The content width in Bricks is generally controlled by the Container element which has a fixed width applied to it by default.


The Web Layout Philosophy

The question you should always be asking should be:
“How can I lay out elements (blocks, text elements, images .. anything..) without modifying them?”

You should first attempt to lay out elements by changing flexbox settings on their parent container.

By only modifying the parent element you save yourself a lot of work. The elements remain free of superfluous settings so they can stay very fluid when resizing the screen on mobile devices.

For example if you have a layout with elements next to each other, then you change the parent to flex-direction: row.

In keeping with this philosophy, as a general rule we work from the outside inwards, thinking about the outer structure first, well before we get to the actual text and images that make up the website.

Set global settings in Bricks Theme Styles

Before getting started, set these global settings which will apply to the whole website.

Click the cog icon, near the top left, then click on Theme Styles.

Set Section padding

Putting padding on the left and right of your Section elements prevents the Container from making contact with the sides of the screen when the device width is narrow.

Scroll down to ELEMENT – SECTION and click on it to expand it.
Scroll to the padding settings and add 30 to the left and right padding. Bricks uses px here by default.

In the toolbar at the top, choose mobile landscape from the device buttons.

Set a smaller amount of padding. We’ve found 18px to be ideal.

Set the content width of the website on Container elements

To constrain the width of the content we can set the width of the Container element.
Scroll down to ELEMENT – CONTAINER and set the width of your content.

Save your work

Great! We’re ready to dig into Bricks’ layout elements in detail.


A quick overview of the steps for creating a layout

  • Create a Section to define a distinct row in your layout
    • Set top and bottom padding on the Section as needed
  • A Container is created by default when you create a Section. Containers are used primarily to constrain the width of the content, and to set up columns or rows of other elements.
    • Use the Content tab of the settings panel on the left to set various CSS flexbox properties.
      For example in a horizontal column-based layout you might consider using the following settings:
      • Set the Direction (flex-direction) of the Container to row.
      • Align the main axis to “space between” to space out the child-elements across the full width of the Container.
      • Align the cross axis to “stretch” to create equal height columns.
      • Set the column gap to create space between columns. Suggested range: between 10px and 40px.
  • Add Blocks inside your Container, or add other elements directly if no nesting is required.
    • Set the widths of the Blocks in Style (tab) > Layout > Sizing > Width.
      Use a percentage value, or if you have a column gap set on the parent Container then use a formula to account for it, such as: calc(33.33% – 20px) for a 3 column layout with 30px gap.

The Bricks layout elements in detail

Section

Sections are stacked vertically down the page in rows. In HTML a <section> is a standalone topical division of a page, typically with a heading. 

As a general rule sections should be the outermost element in your page layout. Sections should not be contained within other layout elements (especially not sections themselves). Think in terms of one section per row

Your Bricks structure panel should look something like this when you collapse all the elements.

The Bricks Section element outputs <section> tags on the front end of the website, and Bricks follows the same principle as the HTML <section> element.

However the Bricks Section element has some additional CSS flexbox rules applied to it, and extensive controls to modify every aspect of the flexbox model, making it a very powerful layout element.

Other uses for the Section element

Use sections to set left and right padding for mobile devices

As the outermost element, the section element is ideal for setting some left and right padding on to prevent your content from touching the sides of the screen on smaller devices. This is best done in Theme Styles so it applies globally to all Section elements.

Set top and bottom padding on Sections to create vertical space

Set a constant amount of top and bottom padding on section elements to create a regular amount of space between sections as you scroll down the page.

Use sections for full-width backgrounds

The Bricks Section element is set to be the full width of the screen by default, so sections are useful for cases where a background – such as a colour, gradient, or image – should extend to the full width of the screen. 

In these cases you simply set the background on the Section element.

In the example below we’re viewing the web page on a very wide screen. The section spans the full width of the screen.

You’ll notice that the text content is constrained to a fixed maximum width. No matter how wide the screen is, the content never gets wider than this. Keeping the content constrained in this way serves an aesthetic purpose, but also prevents extremely wide, unreadable paragraphs of text from occurring.

This width is generally referred to as the content width. You can read more about the principles of website layout in our article Website Mockup Size Guide.

Constraining the content width is achieved by using a Container element.

Container

The Container element is usually used as an intermediate element between the Section element and the Block or other element, such as text or image.

The purpose of the Container element is primarily to constrain the content width of the website to a fixed amount (unlike the Section which is 100% of the screen).

The secondary purpose of the Container is to create rows or columns out of elements such as Blocks, or other elements.

In the image below, the Sections have been coloured cyan, the Containers pink, and the Blocks green.

Outlining the various parts of the website showcases what we are discussing here, namely:

  • Section elements are usually full-width
  • Sections are usually padded
  • Containers are generally set to a fixed width
  • Containers are used to contain rows and columns, and create them via their flexbox settings
  • Blocks are generally used for rows and columns

Block

The Block element is often used as a column or row to hold several other elements – heading, text, images, etc – together.

Blocks can be nested inside each other to create more complex layouts. As such, you may find yourself using Blocks more than any other element.

The Block element has a width of 100% by default.

Div

The Div element in Bricks is identical to the Block element, however its width is not set ie. it has a default width of auto.

Bricks elements as layout elements

It’s worth noting that you don’t always have to use a Block element to create columns and rows. In fact you can use standard Bricks elements – text, image, video, button etc. – as rows and columns themselves. Simply set layout rules such as width, margins, padding on the element itself.

Watch this space

We plan to publish a guide to creating certain types of layouts using Bricks and flexbox. We will be covering not only the practicalities, but also the correct approach and mindset to utilise when building websites.

In the meantime, we recommend practicing as much as possible.
Go forth and build!

Related Articles

Web Development and WordPress FAQs

Web development is the activity of working with web browser technologies, such as writing code in the browser-side languages of HTML, CSS, and JavaScript, or server technologies such as PHP, MySQL, Ruby, Python etc.

Read More »