holakit/packages/core/dist/collection/components/hola-columns/hola-columns.css

Yet another design-driven UI component set.

:host {
  -webkit-columns: 3 15rem;
          columns: 3 15rem;
  grid-column-gap: 2rem;
  -webkit-column-gap: 2rem;
          column-gap: 2rem;
}

:host([ruled]) {
  -webkit-column-rule: 1px solid #eee;
          column-rule: 1px solid #eee;
}

:host([of-cards]) {
  position: relative;
  -webkit-columns: 3 20rem;
          columns: 3 20rem;
  grid-column-gap: 0;
  -webkit-column-gap: 0;
          column-gap: 0;
  box-sizing: border-box;
  margin: 0 calc(var(--hola-card-gap) / -2);
  /* Due to some bugs in iOS Safari, column gap is simulated with paddings of column items.
  Of course we need to apply a pair of negative margin on column itself to make it align. */
}
:host([of-cards])::slotted(.item) {
  padding: calc(var(--hola-card-gap) / 2);
  box-sizing: border-box;
}

:slotted(.item) {
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
          break-inside: avoid-column;
}

:slotted(.item[margined]) {
  margin: 1rem 0;
}