Containers vs. Content

I find it extremely useful to approach styling in a way that allows content (headlines, paragraphs, bullet-lists, inline images, etc.) to be completely 'agnostic' about the container in which it lives.

HTML doesn't make an official distinction between content and containers, those are my terms. Any element might be considered a container, if it contains other elements. The distinction is one you make as a developer: "I'm going to use section tags as a container to hold a group of content elements that go together."

The practical application of this idea usually means that I set up a style system to manage vertical separation between content elements, but leave the responsibility of horizontal separation to containers.

Vertical Separation

Vertical separation is usually managed using the margin property. The browser's defaults are often fairly close to useable. Elements like p, h1-h6, ul, ol have default vertical margin that is usually 1em, creating a natural vertical separation between text blocks. When setting my own values for vertical margin, I often use the 'em' unit, so that spacing between paragraphs will naturally scale with the font-size of the actual text.

Horizontal Separation

Horizontal Separation is usually more involved and varied, and depends on your layout. But it often involves some sort of column or grid system that defines containers into which content elements are placed.

How to I position images next to their corresponding text in a responsive way?

Images can often be treated like any other content. If you want an image to expand to fill it's container horizontally, set a style for img { display: block; width: 100%; }. Now the image should behave very much like a paragraph of text.

On this page, I have the img (as part of a figure) contained in an aside tag. There's nothing special about the behavior of the aside tag, but semantically-speaking, the aside gives us a good idea of how the element is intended to be used – it's supplemental information.

Need some tips about responsive layout?

Responsive layout starts with being intentional about your containers. On this page, I've decided that section and aside tags are containers. My styles for managing responsive layout will affect them, but the content elements they hold will always just have the default block-level behavior of expanding horizontally to fill their container, and growing vertically to hold their content.

We can see this default behavior before we add any styles to this page. Without a single CSS rule, you can see that everything on the page is a big flexible layer-cake: changing the page width will cause the text to re-wrap, and as it re-wraps, elements grow/shrink vertically to adjust. Responsive layout all about leveraging that built-in behavior by manipulating the containers that hold the content.

Usually, this manipulation takes the form of some mechanism for creating a grid (display: inline-block|flex|grid per our 'Grids' assignment), combined with media-queries to change the behavior of that grid at certain 'break-points'.

Important Considerations

The approach I've demonstrated here is only one of many possible approaches. In particular, I've only scratched the very surface of what display: grid; can do. It may be useful to follow this recipe to get the job done today, but what I hope you'll do is experiment with these tools, revisit documentation pages and guides, do your own google searches, and aim to understand the principles that make these tools work. Then you can devise your own solutions to solve the specific challenges presented by the design you are building.