Web page layout – with CSS flexbox and Bricks

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	Tag	Display	Width	Where To Use
Section	`section`	flex	100%	Root level
Container	`div`	flex	1100px	Inside Section
Block	`div`	flex	100%	Inside Section, Container, or another Block
Div	`div`	block	–	Anywhere

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.

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

A quick overview of the steps for creating a layout

As discussed above, Bricks uses CSS flexbox under the hood to lay out pages. So it makes sense to first take a quick look at how pages should be laid out using flexbox.

Page Layout in CSS flexbox, a quick overview

Flexbox – or flexible box – is a set of controls in CSS for laying out pages. Various flexbox properties specify how elements should behave in a layout, and importantly it’s worth noting that these properties – with some exceptions – are usually applied to the parent container, not the elements themselves.

As a very quick overview of how flexbox works we’ll give an example of flex-direction and justify-content.

First, to enable flexbox on a containing parent element, set the display property to flex:

.container {
    display: flex;
}

Next you should choose whether the contained child elements are rows or columns using flex-direction:

.container {
    display:flex;
    flex-direction: row;
}

You can choose how the items are justified using the justify-content property:

.container {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

This covers the very basic principles of layout using flexbox. For an excellent quick overview of flexbox, see this video on the Fireship channel: CSS Flexbox in 100 seconds.

The flexbox properties we use the most on parent containers are:

flex-direction
justify-content
align-items
gap, row-gap, column-gap
flex-wrap

On the child elements themselves we sometimes set the width, and in rare cases:

order
flex-grow
flex-shrink
flex-basis

We almost never set align-self.

Read about flexbox in detail on MDN.

Page Layout in Bricks, quick overview

As discussed earlier, Bricks uses flexbox principles and properties to lay out elements and pages. Hovering over a setting group in Bricks brings up a tooltip with the property name.

Hovering over “Align main axis” shows that this controls the justify content property.

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!

Table of ContentsToggle Table of ContentToggle

Categorised as: Blog, Websites