Intro to CSS layout

The CSS display property controls the layout behavior of an element and the content around that element. Not only do you have full control over how an element behaves in relation to other elements, but you also have full control over how an element's children elements behave.

And we'll quickly cover each of these properties in five parts: Block, Flex, Grid, None, and Inline.

Let's start with Block. Block elements, like sections, headings and paragraphs, block elements stack on top of each other and take up the full width of their parent element.

Let's see this in action. Here in the Webflow Designer, we have a page with an empty Container: its width is 1200px. From the Add panel, let's drag in a heading element. Because the heading's display is set to Block, it takes up the full width of the Container element. Go back up and add a paragraph element, that paragraph also gets knocked to the next line and its content wraps to fit within the width of the Container, because its display is set to Block.

Now, on Block elements, you can always add your own width and a height, but by default, Block elements will take up the full width and push the next element down.

That's Block. Next is Flex.

Flex, or flexbox, is great for one-dimensional layouts, where you can align and justify elements vertically or horizontally. But unlike Block, setting the display to flex on an element doesn't do anything to the element itself. Instead, it affects the children of the element. So you want to set flex on the parent element.

Here's an example: If we want to center the heading, the paragraph and the button? We set the parent element (in this case, the section is the parent to these elements), we set the parent element to flex, which gives us a ton of extra controls here. We can set the direction that the children elements go: horizontal or vertical... and we can use the align box as a visual representation of the parent element to quickly align and justify the children inside.

But flexbox isn't just about the rules you set on the parent element. With any flex child selected (with any child element whose parent is set to flex), we can break the rules we set on the flex parent. We can change the alignment, and even the order it appears within the parent element. But let's undo that because it looked better before.

Now, this is just a fraction of what you can do with flexbox, and Webflow University has even more content, like using flexbox to wrap children elements, so check out that lesson to learn more.

But let's move on to Grid. Same as flex, you set the parent element to grid and the children inside are guided by columns and rows. You can change the number of columns and rows, and you can also drag even more content inside and rows will even automatically be created to fit the content, since grids are just guides. By default, grid cells only take up one element at a time. If you try to add two elements in one cell, it just pushes them around. So to nest content within a cell, you add something like a Div block inside the grid, and then holding down Command on Mac or Control on Windows, you can drag your elements to inside the Div block. For precision, you can always use the Navigator to nest content inside, but once you do, you can drag that Div anywhere inside the grid and even span it to take up multiple columns or rows.

But the really cool thing about CSS grid is its responsiveness. Let's check it out. This grid may look great on desktop, but on a smaller breakpoint like tablet, it might feel a little squished. We can reduce the number of columns, which, don't worry, doing so will not delete your content. And that's because, like we said a minute ago, grids on the web are just guides. Changing the number of columns and rows will only push and move other elements around, so no need to worry about accidentally removing content. But by just removing a column, we made this layout fit better on tablet. If we go back to desktop, it looks as it did before, since changes cascade down from desktop and changes on smaller devices do not affect larger devices.

Again, there's so much more to CSS grid and we cover other grid-based layouts like overlapping sections over at Webflow University, where you can learn more about how to use grid to its fullest.

So, that's Grid. Let's go to the next part, None. And none, short for “nothingness”, does exactly what it says. When you set an element to None, that element is hidden from the page. It doesn't even render on the page and it's completely ignored by screen readers. And if you ever want to select it again, you can find it in the Navigator — there's even an indicator that this element is set to display: none. This is commonly used for interactions when you want to hide elements on page load or you want to hide an element after it's been interacted with.

And another note for you: if you don't see None in the Style panel (if there's another inline property being used), you can always find it in the dropdown.

Now. There's a clear distinction to be made between setting the display to none and setting the opacity to 0%. 0% opacity makes the element invisible, but it's still there, taking up space. It's just completely illegible. But display: none removes it from the page. It's hidden from the site and not accessible to someone browsing.

But, keep in mind: That element is still in the website's code. If someone were to go in and inspect element on that site, you can still see the content even though it's set to display: none. So. If you have something private or super, top secret, consider removing it from your site entirely.

Yeah, been there, done that, Soph. Grimur? Is that you? Yeah, my display is also set to none today. I can't see you. I am technically here, but I am also not... Here. I'm not here.

Oh. Okay, so that's None. Are we done? No. We have one final part. Next to None, we have some inline properties here, and we'll cover all of these really quickly. First: inline-block.

Inline-block is like Block. You can give your element a width and a height, but the element sits inline, meaning inline-block elements will sit next to each other and when they hit the end of the container, they will wrap to the next line, just like how text on a word document behaves.

Here's that previous example we used for Block: Let's copy and paste the heading two more times, so we have three headings that all share the same class. If we set one heading to inline-block, then all three headings sit next to each other. And we can even add size properties to them, but they will still sit next to each other and wrap when they hit the boundary of the container they're in.

Next is inline-flex. Inline-flex is like flex, where you set flex on the parent element and you can align and justify the children in any one direction, but now the flex parent becomes inline.

Here I have three cards that all have the same class, each of them are set to flex and have a defined width. And notice how they're each getting knocked to the next line. But if I set them to inline-flex, they'll retain the flex properties, but now the three cards are sitting next to each other. They're inline with each other.

What about inline-grid? Same concept as inline-flex, but with a grid. An element set to inline-grid will sit inline with surrounding elements, but the children elements inside will be laid out by columns and rows. And you'll notice the size of the columns and rows is defined by the content inside.

Now, inline-flex and inline-grid. When would you use these? Well, they're super handy any time you want a specific layout inline with other elements. So if you have a icon layout or a button design, you can sit that inline with something like text.

And there are so many different ways to make layouts. That's the beauty of CSS. But once you use each of these properties and as you build more and more, you can learn which ones work best for you and your specific layouts.

Alright, last one. Inline. Just inline. Inline is the default display property for content like a text span or a text link. Inline content ignores any values you've entered for size dimensions and any padding and margin on the top or bottom. But inline does respect the text content and its typography properties.

So if we're changing the text inside an Inline element, we can see that the size is based on that text. And under Typography in the Style panel, we can increase the font size and change the letter spacing — both of which also change the size of the element. But if you want to resize inline elements, you should use inline-block as the display type.

And finally with inline, in the dropdown here, you can vertically align the element with its surrounding elements.

And that's it. We covered a lot, so let's recap each of the properties super quickly:

Block elements stack on top of each other, even if their size doesn't take up the full width of their parent element.

Flex elements align and justify the children elements inside to follow one direction.

Children elements inside something set to grid are guided by columns and rows. And if you want to nest content in a grid cell, you use a Div block.

Elements set to None don't even render on the page and are inaccessible to the user and screen readers. But they still exist in the code.

And finally, we covered the inline properties: Inline-block is like block where you can change the dimensions, but they will sit next to other elements. Inline-flex sets a flex container to sit inline with other content, and the same thing for inline-grid, but with a grid. And finally, inline elements, like a text span, are sized only by the content inside and its typography settings, not by setting a defined width or height.

And that's an overview of the display properties in Webflow.