Awesome CSS Layout Resources

Fast effective css layout templates

https://dev.to/kiranrajvjd/awesome-css-layout-resources-for-beginners-508a

there are more listed up there

---

e.g. quackit.com is really awesome.

Here is a really simple responsive grid using CSS Grid:

.grid {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
.box {
    color: white;
    font-size: 4vw;
    padding: 10px;
    background: rgba(208,61,69);
    text-align: center;
}
.box:nth-child(1) { grid-column: span 12; }
.box:nth-child(2), .box:nth-child(3) { grid-column: span 6; }
.box:nth-child(4), .box:nth-child(5), .box:nth-child(6) { grid-column: span 4; }
.box:nth-child(7), .box:nth-child(8), .box:nth-child(9), .box:nth-child(10) { grid-column: span 3; }
.box:nth-child(11) through .box:nth-child(16) { grid-column: span 2; }

@media screen and (max-width: 575px) {
    .grid { display: block; }
    .box { margin: 10px 0; }
}

---

csslayout.io has great layout + element css

The site includes examples for CSS ribbons, folder structures, timelines, and many other UI patterns.