Mechanisms of creating layouts.

§ Centering

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

.text-align:center center-aligns text.

§ Text Columns

The .textcolumns class creates multi-column text using the CSS column-width property. The column width can be set with the .colwidth-* classes.

§ Full Bleed

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

§ Padding & Margin

Add some padding with .padding, or a margin with .margin.

Add padding or margin in specific axes with .margin-block, .margin-inline, .padding-block and .padding-inline.

§ Scrolling

Set the overflow property with these utility classes:

Show scrollbars if needed
Always show scrollbars

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

A form with aligned labels and inputs.
<form class="table rows">
      <label for=name>Name</label>
      <input type=text id=name name=name>
      <label for=adr>Address</label>
      <input type=text id=adr name=adr>

§ Positioning

Set display: block.
Set display: inline.
Set display: contents.
Set position: fixed.
Set position: sticky.
Set top: 0. Use together with .fixed or .sticky.
Set right: 0. See .top.
Set bottom: 0. See .top.
Set left: 0. See .top.
Set float: left.
Set float: right.

Last updated