Widget:Card
From The Lost Media Wiki
<style>
.card img { width: 100%; height: auto; } .card { width: auto; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside: avoid; break-inside: avoid-column; background: #f6f6f6; } .card-info { padding: 0 1rem; display: -ms-grid; display: grid; -ms-grid-rows: 1fr 2.5rem; grid-template-rows: 1fr 2.5rem; -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; border-bottom: 16px solid #fff; } .card-title { font-size: 1.2rem; font-weight: bold; grid-row: 1 / 2; grid-column: 1 / 2; } .card-icon { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: right; width: 30px; height: 30px; background-color: LightBlue; border-radius: 100%; display: -ms-grid; display: grid; -ms-grid-column-align: center; justify-items: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .card-author { grid-row: 2 / 3; grid-column: 1 / 2; -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; } .card-stats { -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; justify-self: right; } @media screen and (min-width: 30em) { .masonry-css { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .card { width: 100%; height: auto; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside: avoid; break-inside: avoid-column; } } @media screen and (min-width: 100em) { .masonry-css { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } </style>