/* grid system for the gods */ body { background-color: #FF69C0; /* pink, for the love of it */ } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* three gods of the grid */ } .god { background-color: #C0D8FF; /* blue-ish grey for the gods' domain */ border: 8px solid #333; /* thick black border, for the gods' wrath */ padding: 16px; grid-column: 1; /* each god gets its own column */ } .god:hover { background-color: #333; /* black, for the gods' darkness */ } @media (min-width: 768px) { /* for the gods of the desktop, where the grid is king */ body { background-color: #FF69C0; } .grid { grid-template-columns: 2fr 1fr; /* two gods of the grid on desktops */ } } @media (min-width: 1200px) { /* for the gods of the behemoth desktops, where the grid is god */ body { background-color: #FF69C0; } .grid { grid-template-columns: 1fr 3fr; /* one god of the grid on behemoth desktops */ } }

God of the First Column

This god rules over the leftmost column, where the sun rises.

Learn more about this god's CSS

God of the Middle Column

This god rules over the middle column, where the world is made.

Learn more about this god's CSS

God of the Last Column

This god rules over the rightmost column, where the shadows lie.

Learn more about this god's CSS

Back to Grid System