Layouts on the web

There are some powerful things you can do with CSS. Backgrounds. Borders. Margins. Padding. The box model. It wasn't long until they realized we were just reading an index. From the CSS tutorial on W3Schools. And that's when we realized: We should do this a different way.

Let's cover a top-level overview of some of the more common layout properties: We'll start with display settings, then we'll move on to spacing, positioning, and finally, transform.

So let's do display settings. And as we know, the web is built on the box model. It's helpful to think of each element as a box. (Its own box-like boundary.) Display settings set up how these boxes interact with each other.

We'll start with block elements. Block elements — like headings and paragraphs by default? They stack on top of each other. Their boundaries take up the full width of their parent element. That also means they don't wrap. Here's a tiny box. Because its display is set to block, copying and pasting it is knocking each new box down to the next line. Why? Because its display is set to block. Something we said just a moment ago.

If we wanted this block to sit next to other blocks, we'd set its display setting to inline block. Inline block is like block — things can have a width and a height. But the block sits inline. (Elements sit next to each other on the same line.) And when they hit the inner boundary of their parent? They wrap to the next line.

Then we have inline. Inline elements behave just like text. Text spans or text links are good examples of this — they ignore set dimensions but they'll take into account typography values (like font size). But if you're trying to apply something that has to do with dimension to an element that's positioned inline? It won't work. (It'll ignore those dimensions.)

Next up is flexbox. It's a super powerful layout tool. Which is what it says in the CSS spec according to the photo we captured and doctored over 18 months ago. Flexbox is great for justifying and aligning content along one dimension. The properties are usually set on the parent element, and changes affect child elements of that parent.

And if flexbox is great for one-dimensional layouts, CSS grid (or just “grid”) is great for two-dimensional layouts. With grid, you can set columns and rows on a parent element. And child elements can be placed right inside. You can even span those child elements across multiple columns...or across multiple rows.

And finally, we have display: none. It doesn't just make the element invisible; the element won't even render or take up any space on the page. But that's a quick overview of our first part: our display settings.

Next up is padding and margin. These create breathing room using padding (which creates space inside an element's boundary) and margin (this creates space outside the element's boundary).

We have positioning, which affects how elements are positioned relative to themselves. Auto (or static) respects the normal flow of content. This is the default. Relative lets us move something around without affecting other elements. We're moving something relative to its normal position. Absolute positioning lets us position something around its parent element. And fixed lets us position something around the viewport. Great for persistent navigation.

And finally, we have sticky. Position: sticky behaves like a relatively-positioned element, until you scroll and it hits a point you specify. Then it behaves like a fixed element. We have a ton of content on each of these positioning controls on Webflow University, so check that out so you can master each of these.

But here we'll move on — this is our last section in this video. Transform. It's a quick one. Transform lets us move, or rotate, or scale, or skew content.

Like we said, this is a quick crash course on many of our layout options. We've created detailed content for all of these on Webflow University — but this serves as brief a overview to get started or brush up on some of these CSS layout properties.