github.com/hernad/nomad@v1.6.112/ui/app/styles/components/flex-masonry.scss (about) 1 /** 2 * Copyright (c) HashiCorp, Inc. 3 * SPDX-License-Identifier: MPL-2.0 4 */ 5 6 .flex-masonry { 7 display: flex; 8 flex-direction: column; 9 flex-wrap: wrap; 10 align-content: space-between; 11 margin-top: -0.75em; 12 13 &.flex-masonry-columns-1 > .flex-masonry-item { 14 width: 100%; 15 } 16 &.flex-masonry-columns-2 > .flex-masonry-item { 17 width: 50%; 18 } 19 &.flex-masonry-columns-3 > .flex-masonry-item { 20 width: 33%; 21 } 22 &.flex-masonry-columns-4 > .flex-masonry-item { 23 width: 25%; 24 } 25 26 &.with-spacing { 27 > .flex-masonry-item { 28 margin-top: 0.75em; 29 margin-bottom: 0.75em; 30 } 31 32 &.flex-masonry-columns-2 > .flex-masonry-item { 33 width: calc(50% - 0.75em); 34 } 35 &.flex-masonry-columns-3 > .flex-masonry-item { 36 width: calc(33% - 0.75em); 37 } 38 &.flex-masonry-columns-4 > .flex-masonry-item { 39 width: calc(25% - 0.75em); 40 } 41 } 42 }