Grids are just kind of naturally pleasing. They just seem to click in the human brain like other inventions of the modern world: white walls, musical scales, or clean floors. Harmony is good and we should use it.
#n-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
Screen sizes can vary considerably and your phone’s constrained width
will likely squish the above grid into something uncomfortably thin. So,
let’s add some @media
queries and make this thing as
responsive as a spec’d out MacBook.
#n-columns { display: grid; gap: 8px; } /* tablet size */ @media (min-width: 600px) { grid-template-columns: repeat(2, 1fr); } /* desktop size */ @media (min-width: 1000px) { grid-template-columns: repeat(4, 1fr); }
Desktop (1000 pixels or more):
Tablet (600 pixels to 999 pixels wide):
Mobile (less than 600 pixels):
So-called because it was lusted after by many web developers—and for the first decades of the web it was ludicrously difficult to achieve. Grid makes it ludicrously easy.
#holy-grail { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } header, footer { grid-column: 1 / 4; }