Layout mode

  • Revision slug: Web/CSS/Layout_mode
  • Revision title: Layout mode
  • Revision id: 396161
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Fixed title attributeMoved From CSS/Layout_mode to Web/CSS/Layout_mode

Revision Content

A CSS layout mode, sometimes abbreviated as layout, is an algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

  • The block layout designed for laying out documents. The block layout contains document-centric features, like the ability to float elements or to lay them out over multiple columns.
  • The inline layout designed for laying out texts.
  • The table layout, designed for laying out tables.
  • The positioned layout, designed for positioning elements without much interaction with other elements.
  • The flexible box layout, designed for laying out complex pages that can be resized smoothly. {{ experimental_inline() }}
  • The grid layout, designed for layout out elements relatively to a fixed grid. {{ experimental_inline() }}

Note: not all CSS properties apply to all layout modes. Most of them apply to one or two of them and has no effect if set on an element participating on another layout mode.

See also

  • {{ CSS_key_concepts() }}

Revision Source

<p>A <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> <strong>layout mode</strong>, sometimes abbreviated as <em>layout<code>,</code></em> is an algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:</p>
<ul>
  <li>The <em>block layout</em> designed for laying out documents. The block layout contains document-centric features, like the ability to <a href="/en-US/docs/CSS/float" title="/en-US/docs/CSS/float"><em>float</em></a> elements or to lay them out over <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts"><em>multiple columns</em></a>.</li>
  <li>The<em> inline layout</em> designed for laying out texts.</li>
  <li>The <em>table layout</em>, designed for laying out tables.</li>
  <li>The <em>positioned layout</em>, designed for positioning elements without much interaction with other elements.</li>
  <li>The <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/"><em>flexible box layout</em></a>, designed for laying out complex pages that can be resized smoothly. {{ experimental_inline() }}</li>
  <li>The <em>grid layout</em>, designed for layout out elements relatively to a fixed grid. {{ experimental_inline() }}</li>
</ul>
<div class="note">
  <p><strong>Note:</strong> not all <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS properties</a> apply to all <em>layout modes</em>. Most of them apply to one or two of them and has no effect if set on an element participating on another layout mode.</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_key_concepts() }}</li>
</ul>
Revert to this revision