/* The grid definition */ .grid-4-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px; column-gap: 4px; }
.grid-span-4 { grid-column: span 4 / span 4; background: #ddddff; }
.grid-span-4 { grid-column: span 4 / span 4; background: #ddddff; } .hero { min-height: 250px; background: url("https://...some_image.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; }
Foo Bar Baz - Title
.grid-span-1 { grid-column: span 1 / span 1; background: #ddffff; padding: 1rem; }
.grid-span-3 { grid-column: span 3 / span 3; background: #ffdddd; padding: 1rem; }
.grid-span-1 { grid-column: span 1 / span 1; background: #ddffff; padding: 1rem; }
.grid-span-3 { grid-column: span 3 / span 3; background: #ffdddd; padding: 1rem; }
.grid-span-1 { grid-column: span 1 / span 1; background: #ddffff; padding: 1rem; }
.grid-span-3 { grid-column: span 3 / span 3; background: #ffdddd; padding: 1rem; }
.grid-span-4 { grid-column: span 4 / span 4; background: #ddddff; }