github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/list-collection.scss (about) 1 .unhealthy > div, 2 .healthy > div { 3 @extend %card-grid; 4 } 5 .list-collection { 6 height: 500px; 7 position: relative; 8 } 9 .healthy > div { 10 width: calc(100% + 23px); 11 min-height: 500px; 12 } 13 .unhealthy > div { 14 margin-bottom: 20px; 15 } 16 .healthy > div > ul > li { 17 padding-right: 23px; 18 padding-bottom: 20px; 19 } 20 %card-grid > ul, 21 %card-grid > ol { 22 list-style-type: none; 23 display: grid; 24 grid-auto-rows: 12px; 25 } 26 @media #{$--fixed-grid} { 27 %card-grid > ul, 28 %card-grid > ol { 29 grid-gap: 20px 20px; 30 grid-template-columns: repeat(4, minmax(220px, 1fr)); 31 } 32 } 33 @media #{$--lt-fixed-grid} { 34 %card-grid > ul, 35 %card-grid > ol { 36 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 37 grid-gap: 20px 2%; 38 } 39 }