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 explaination of the first term.
  <!-- ... -->
</dl>

<dl class="textcolumns">
  <div>
  <dt>Term 1
  <dd>This is an explaination 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.

§ 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%.

§ 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>
    </ul>
  </div>
  <div>
    <strong>Nested list</strong>
    <ul class="nested-list">
      <li>Items
        <ul><li>Item 1
            <li>Item 2</ul>
      <li>Widgets
        <ul><li>Widget 1
            <li>Widget 2</ul>
    </ul>
  </div>
</div>

§ Aspect Ratio

To set the aspect ratio of an element, use the aspect-ratio CSS property:

<style>#aspect-ratio-example > .box { height: 10vh }</style>
<div id="aspect-ratio-example" class="flex-row flex-wrap:wrap">
  <div class="box" style="aspect-ratio: 1/1">1:1</div>
  <div class="box" style="aspect-ratio: 4/3">4:3</div>
  <div class="box" style="aspect-ratio: 16/9">16:9</div>
  <div class="box" style="aspect-ratio: 2/1">2:1</div>
  <div class="box" style="aspect-ratio: 2/3">2:3</div>
  <div class="box" style="aspect-ratio: 16/10">16:10</div>
  <div class="box" style="aspect-ratio: 21/9">21:9</div>
  <div class="box" style="aspect-ratio: 4/1">4:1</div>
</div>

§ Scrolling

Set the overflow property with these utility classes.

.overflow:auto

Show scrollbars if needed.

.overflow:scroll

Always show scrollbars (use .overflow-x:scroll or .overflow-y:scroll to set on a specific axis).

.overflow:clip

Overflow content is clipped at the element's padding box. Can be set per axis using .overflow-x:clip or .overflow-y:clip, and the clip margin can be extended using the overflow-clip-margin CSS property.

Info: When using the .overflow:scroll utilities, it is recommended to add the element to the tabbing order (tabindex=0) so that the container can be scrolled using the keyboard.

§ Pseudo-tables

The .table class makes an element act like a table for the purposes of layout. The .row class can be used to create a table row, or you can make all descendants of an element into rows with .rows.

<form class="table rows">
  <p>
      <label for=name>Name</label>
      <input type=text id=name name=name>
  </p>
  <p>
      <label for=adr>Address</label>
      <input type=text id=adr name=adr>
  </p>
</form>

Pseudo-tables work nicely with description lists:

<dl class="table rows" style="width: auto;">
  <div><dt>Name:     <dd>Anakin Skywalker</div>
  <div><dt>Alias:    <dd>Darth Vader     </div>
  <div><dt>Species:  <dd>Human           </div>
  <div><dt>Gender:   <dd>Male            </div>
  <div><dt>Spouse:   <dd>Padmé Amadala   </div>
  <div><dt>Homeworld:<dd>Tatooine        </div>
</dl>

§ Positioning

.block

Set display: block.

.inline

Set display: inline.

.contents

Set display: contents.

.fixed

Set position: fixed.

.sticky

Set position: sticky.

.top

Set top: 0. Use together with .fixed or .sticky.

.right

Set right: 0. See .top.

.bottom

Set bottom: 0. See .top.

.left

Set left: 0. See .top.

.float:left

Set float: left.

.float:right

Set float: right.

§ Printing

Missing.css attempts to prevent page breaks inside of grouped content and after headings when printed. Additionally, collapsed <details> elements will be revealed during printing in supported browsers.

During printing, missing.css will also annotate <a> and <abbr> tags by displaying an ::after pseudo-element that contains the href or title attribute value in parenthesis. You can disable these annotations by placing the following class on a parent element:

.annotations@print:disabled

Disable print annotations on child elements.