@offensichtbar-codestock/es6-flex-masonry-grid/build/demo.css

ES6 flex masonry grid

/*___________________________ */
/* preview styles */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* masonry grid */

#demo_masonry-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    margin-left: -10px;
}

@media (min-width: 480px) {
    .osb_griditem { width: calc(100% / 2); }
}
@media (min-width: 640px) {
    .osb_griditem { width: calc(100% / 3); }
}
@media (min-width: 768px) {
    .osb_griditem { width: calc(100% / 4); }
}
@media (min-width: 992px) {
    .osb_griditem { width: calc(100% / 5); }
}
@media (min-width: 1200px) {
    .osb_griditem { width: calc(100% / 6); }
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #211e24;
}
.container {
    padding: 1em;
}
#demo_masonry-grid > div {
    visibility: hidden;
}
#demo_masonry-grid > div.osb_animation-complete {
    visibility: visible;
}
.osb_griditem {
    padding: 10px;
}
.osb_griditem > div {
    background-color: #f4f4f4;
    height: 100%;
}
h2 {
    font-size: 1.25rem;
    margin: .5rem 0 .25rem;
    padding: 0 15px;
}
p {
    padding: 0 15px 30px;
}
label {
    display: block;
    margin-bottom: 10px;
    color: white;
}
input[type=number]{
    height: 39px;
    width: 40px;
    padding-left: 3px;
}
button {
    padding: 10px 20px;
    border-radius: 0;
    border: 1px dashed #666666;
}
button.btn-delete:hover {
    border: 1px solid #666666;
}
button.btn-add{
    color: #f4f4f4;
    border: 1px solid #f4f4f4;
    background-color: #333333;
    margin-bottom: 20px;
}
button.btn-add:hover {
    background-color: #444444;
}