Layout

Mechanisms of creating layouts.

§ Centering

.text-align:center center-aligns text.

An element with class .center centers a single child element using display: grid; place-items: center.

.align-content:center vertically aligns content in the center of the alignment container. Flexbox no longer required! We also provide .align-content:end.

§ Text columns

The .textcolumns class creates multi-column text using the CSS column-width property. The column width can be set with the --col-width variable. Protip: consider using the ch unit to set column widths.

When combined with the <dl> element, missing.css will prevent orphans and widows in supported browsers. For full support, wrap pairs of <dt> and <dd> elements in a <div>.

<dl class="textcolumns">
  <dt>Term 1
  <dd>This is an explanation of the first term.
  <!-- ... -->
</dl>

<dl class="textcolumns">
  <div>
  <dt>Term 1
  <dd>This is an explanation of the first term, and missing.css will make sure it doesn't get split from its sibling `<dt>` tag.
  </div>
  <!-- ... -->
</dl>

§ Flow gap

The .flow-gap class adds vertical margins between its children.

§ Full-size

Add the .fullbleed class to make an element go outside its container and span the whole width of the viewport.

The .fullscreen class will size an element to fill the screen.

These classes will not work on flex children (e.g. children of .flex-row, .flex-column, or .flex-switch containers).

§ Layout utilities

Add some padding with .padding, or a margin with .margin. The amount of margin or padding is determined by the density utilities.

Add padding or margin in specific axes with the following classes.

• .margin
• .margin-inline
• .margin-inline-start
• .margin-inline-end
• .margin-block
• .margin-block-start
• .margin-block-end
• .margin-start
• .margin-end
• .padding
• .padding-inline
• .padding-inline-start
• .padding-inline-end
• .padding-block
• .padding-block-start
• .padding-block-end
• .padding-start
• .padding-end

Automatic margin is provided with the following:

• .margin-inline:auto
• .margin-inline-start:auto
• .margin-inline-end:auto
• .margin-start:auto
• .margin-block:auto
• .margin-block-start:auto
• .margin-block-end:auto
• .margin-end:auto

To remove padding or margin, use one of the following classes:

• .margin:0
• .margin-inline:0
• .margin-inline-start:0
• .margin-inline-end:0
• .margin-block:0
• .margin-block-start:0
• .margin-block-end:0
• .margin-start:0
• .margin-end:0
• .padding:0
• .padding-inline:0
• .padding-inline-start:0
• .padding-inline-end:0
• .padding-block:0
• .padding-block-start:0
• .padding-block-end:0
• .padding-start:0
• .padding-end:0

Make an element full-width with the .width:100% class. Similarly with .height:100%. Logical variants .inline-size:100% and .block-size:100% are also available.

§ Border utilities

Add a border with .border; you can target specific axes with these classes:

• .border-inline
• .border-inline-start
• .border-inline-end
• .border-block
• .border-block-start
• .border-block-end

Borders can be removed by using .border:none or one of the following classes:

• .border-inline:none
• .border-inline-start:none
• .border-inline-end:none
• .border-block:none
• .border-block-start:none
• .border-block-end:none

The .nested-list class removes extraneous margins in nested lists. Deprecated: Will be removed in version 2.0. In the future, nested lists will not have margins by default. You can add them back in using <li><p> as needed.

<div class="flex-switch">
  <div>
    <strong>Regular list</strong>
    <ul><li>Items
        <ul><li>Item 1
            <li>Item 2</ul>
        <li>Widgets
        <ul><li>Widget 1
            <li>Widget 2</ul>