Layout

First Published On:
April 23, 2024
Last Updated:
May 5, 2024

Summary

Figure 1. Animation demonstrating state layer implementation.

No items found.

Let’s rebuild this layout from Chainlift's blog.

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.

Recommended Usage

Customization

Resources that mention this topic

No items found.