Layout

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:

.overflow:auto
Show scrollbars if needed
.overflow:scroll
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">
  <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>

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

Last updated