display

<!-- Comparison of inline, block, inline-block -->
<div>
  <span style="display: inline; background: #ffd;">inline (width/height ignored)</span>
  <span style="display: inline; background: #dff;">inline (side by side)</span>
</div>

<div style="display: block; background: #fcc; padding: 8px;">block (occupies full line)</div>
<div style="display: block; background: #cfc; padding: 8px;">block (next line)</div>

<div>
  <span style="display: inline-block; width: 120px; height: 40px; background: #ccf; padding: 8px;">inline-block</span>
  <span style="display: inline-block; width: 120px; height: 40px; background: #fcf; padding: 8px;">side-by-side + size works</span>
</div>

<!-- flex layout -->
<div style="display: flex; gap: 8px; background: #eee; padding: 8px;">
  <div style="background: #f90; padding: 8px;">Flex 1</div>
  <div style="background: #09f; padding: 8px;">Flex 2</div>
  <div style="background: #0f9; padding: 8px;">Flex 3</div>
</div>

<!-- grid layout -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #eee; padding: 8px;">
  <div style="background: #f90; padding: 8px; text-align: center;">Grid 1</div>
  <div style="background: #09f; padding: 8px; text-align: center;">Grid 2</div>
  <div style="background: #0f9; padding: 8px; text-align: center;">Grid 3</div>
  <div style="background: #f0f; padding: 8px; text-align: center;">Grid 4</div>
  <div style="background: #ff0; padding: 8px; text-align: center;">Grid 5</div>
  <div style="background: #0ff; padding: 8px; text-align: center;">Grid 6</div>
</div>

View sample page

display: flex and display: grid are commonly used for layouts, but float and table-cell work too. Choose whichever approach best fits your use case.

See also the dedicated pages for flex / grid / float. Below is a self-contained summary of the key properties so you can use them from this page alone.

Setting display: flex turns the element into a flex container. Its direct children become flex items and are laid out in a row by default.

/* Centered horizontal layout (classic nav bar pattern) */
.nav {
    display: flex;
    justify-content: space-between; /* push items to both ends */
    align-items: center; /* vertically center items */
    gap: 16px;
}

/* Vertical stack (card with title, body, and button) */
.card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Wrapping horizontal layout (tag list, etc.) */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Equal-width children */
.equal-columns {
    display: flex;
    gap: 16px;
}
.equal-columns > div {
    flex: 1; /* all children share space equally */
}

/* Fixed sidebar + flexible main */
.layout {
    display: flex;
    gap: 24px;
}
.sidebar {
    flex: 0 0 240px; /* no grow, no shrink, fixed 240px */
}
.main {
    flex: 1; /* take up all remaining space */
}

View sample page

Common Mistakes

justify-content and align-items have no effect unless the parent element has display: flex. Likewise, flex and align-self are ignored when the parent is not a flex container.

NG: justify-content has no effect without display: flex on the parent.

.container {
    justify-content: center; /* ignored */
}

OK: Add display: flex first.

.container {
    display: flex;
    justify-content: center; /* works */
}

If gap has no effect, make sure the parent has display: flex or display: grid. The gap property does not work on regular block elements.

Without flex-wrap: wrap, child elements will overflow the parent instead of wrapping to the next line. Add flex-wrap: wrap when you have many items in a row.

View sample page

Setting display: grid turns the element into a grid container. Its direct children become grid items and are placed on a two-dimensional grid. Unlike flex, you can explicitly define both columns and rows.

The 1fr unit means "one fraction of the remaining space." For example, 1fr 2fr splits the space in a 1:2 ratio. repeat(3, 1fr) is shorthand for 1fr 1fr 1fr.

/* Three equal columns (image gallery, etc.) */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Two-column layout (sidebar + main content) */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

/* Responsive card grid (column count adjusts to viewport width) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* Span one item across two columns */
.featured {
    grid-column: span 2;
}

Combining auto-fit with minmax() creates a responsive grid without media queries. In the example above, each item has a minimum width of 200px, and additional columns appear automatically when space allows.

View sample page

Common Mistakes

grid-column and grid-row have no effect unless the parent element has display: grid. Setting them on a child alone is ignored.

NG: grid-column has no effect without display: grid on the parent.

.item {
    grid-column: span 2; /* ignored */
}

OK: Add display: grid to the parent first.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.item {
    grid-column: span 2; /* works */
}

If you forget grid-template-columns, all children stack in a single column (no column definitions exist). Always define columns when using grid.

If a responsive grid with repeat(auto-fit, minmax(200px, 1fr)) overflows, check whether the parent width is smaller than the minmax minimum (200px in this case).

View sample page

The float property was originally designed for text wrapping, but it can also be used for simple layouts. It requires fewer declarations than flex or grid, making it a quick option for straightforward column arrangements.

/* Wrap text around an image */
.image-left {
    float: left;
    margin-right: 16px;
}

/* Two-column layout */
.col-left {
    float: left;
    width: 70%;
}
.col-right {
    float: right;
    width: 28%;
}
/* Clear floats on the parent element */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

After using float, apply a clearfix to the parent element or set overflow: hidden on the parent to clear the float. See the float / clear pages for details.

View sample page

Common Mistakes

If you forget to clear floats, the parent element collapses to zero height. This happens because floated children are removed from the normal document flow.

NG: Without clearing floats, the parent's height becomes 0 and subsequent elements overlap.

.parent {
    background: #eee; /* invisible (height is 0) */
}
.child {
    float: left;
    width: 50%;
}

OK: Use a clearfix to clear floats.

.parent::after {
    content: "";
    display: block;
    clear: both;
}

Without a width, floated elements shrink to fit their content. Always set a width for multi-column float layouts.

If left and right columns total 100%, margins, padding, or borders can cause overflow. Keep the total below 100% or use box-sizing: border-box.

View sample page

There are two common ways to hide an element, but they behave differently.

/* inline, block, hidden */
div.test { display: inline;}
div.test1 { display: block;}
div.test2 { display: none;}

/* inline-block (side by side + width/height adjustable) */
.btn { display: inline-block; width: 120px; padding: 8px;}

/* flexbox (horizontal layout) */
.card-row { display: flex; gap: 16px;}

/* flexbox (vertical layout) */
.card-col { display: flex; flex-direction: column; gap: 8px;}

/* grid layout */
.grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}

/* table-like behavior */
.table-like { display: table; width: 100%;}
.cell-like { display: table-cell; padding: 8px;}

Changes how an element is displayed. Note that the default value varies depending on the HTML element.

The display property is also covered in this article, which is aimed at beginners.

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7+ ○

6 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN .