Layout Overview

Overview

Layout refers to the arrangement of elements on a page. In this section, we'll learn about layout by walking through building this example blog page using the default LiftKit theme.

We’ll start with a blank screen. Assume there’s boilerplate HTML in there that renders a blank page.

Next, let’s drop in a section.

Sections set padding, but they don’t control content width.

So if you don’t set some kind of max-width control, things may look too far apart on large screens.

That's why we use containers. Containers control content width.

Nesting our content in a container ensures it doesn’t get too wide. If you need full screen, though, you can always get it with .container__widest.

Layout within the container is controlled case-by-case. You can use grids, flex boxes, or simple blocks.

Returning to our example, you can see how the structure of the page looks when we overlay the annotations.