Stylize responsive rows for a <ul> list

By Bill Sholar and Kim Green of Short Story Marketing

Use this CSS so your columns adjust as 3 columns for wider containers, 2 for medium, and 1 when the container is narrow. Add the .cols3 CSS to your site.css file to modify based on the classes available in existing rows.

.cols3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  -webkit-column-width: 350px;
  -moz-column-width: 350px;
  column-width: 350px;
}

Align contents of a column to vertical center

By Bill Sholar and Kim Green of Short Story Marketing

Use this CSS to align the contents of a column to vertical center of the column.

.centeralign {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

Align contents of a column to vertical bottom

By Bill Sholar and Kim Green of Short Story Marketing

Use this CSS to align the contents of a column to the vertical bottom of the column.

.bottomalign {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}