CSS display properties control webpage layout. Block elements take full width and stack vertically, inline elements flow within text without line breaks, flexbox aligns items in rows or columns with easy spacing, and grid manages two-dimensional layouts with precise row and column control. Use block for full-width stacking, inline for tight inline elements, flexbox for one-directional alignment, and grid for complex structured designs.

If you've ever tried to line up a few elements on a webpage or make something stretch full width, you’ve probably run into CSS display properties. They’re the backbone of layout in CSS, and knowing how block, inline, flex, and grid behave helps you control your page structure with confidence.

Understanding block and inline basics

These two are the oldest players in the game and still super useful today.

• Block elements take up the full width available by default. Think of elements like <div>, <code><p></p>, and <h1></h1> — they stack vertically and push other elements away.
• Inline elements, like <span></span> or <a></a>, sit inside the flow of text. They don’t start on a new line and only take up as much width as needed.

For example, if you have three <span></span>s next to each other in HTML, they’ll line up side by side until they hit the edge of the container. But three <div>s will each be on their own line.<p>One thing to note: you can't set width or height on inline elements the way you can with block ones. So if you want an inline element to size exactly, you might switch it to <code>inline-block.



Flexbox for one-dimensional layouts

Flexbox (display: flex) is great when you want things to line up in a row or column and stay aligned without too much fuss.

Once you apply display: flex to a container, its children become flex items. These items:

• Line up in a row by default
• Don’t wrap unless told to
• Can easily be spaced apart or pushed to edges using justify-content and align-items

A common use case is navigation bars. You can center links horizontally and vertically in just a couple lines of code.

Also, flex items can grow or shrink based on space available. If you want all buttons in a group to stretch equally, flex-grow: 1 does the trick.

Just remember: flex is one-dimensional. It works best for rows or columns, not both at the same time.

Grid for two-dimensional control

CSS Grid (display: grid) is where things get more structured. Unlike flexbox, grid lets you define rows and columns together, giving you a full layout system.

You define columns and rows using grid-template-columns and grid-template-rows. For example:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

This would create a layout with three columns, where the middle one is twice as wide as the others.

Grid also makes it easy to place items exactly where you want them using grid-column and grid-row. Want a sidebar that spans two rows? No problem.

It’s especially handy for complex dashboard-style layouts where precise placement matters.

When to choose which

There's no single right answer — it depends on what you're building.

• Use block when you want full-width elements or need stacking behavior
• Reach for inline when working within a line of text or keeping elements tight
• Go with flexbox for simple alignment in one direction — menus, buttons, cards
• Choose grid when you need full control over rows and columns together

And sometimes, you’ll mix them. A grid layout might contain a flex container inside one of its cells.

It’s not complicated once you know the roles each plays.