Let's read a simple grid gallery, rule by rule.
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }.
display: grid is the switch without it, everything below has no effect at all, exactly like display: flex needing to be set first for flexbox.
grid-template-columns: 1fr 1fr 1fr describes exactly three columns, and because each is written as 1fr, they split the available width into three EQUAL shares if the container is 900px wide, each column ends up roughly 300px (minus gap space). If this were instead 2fr 1fr 1fr, the first column would claim double the share of either of the other two.
gap: 12px adds 12 pixels of breathing room both between columns AND between rows, should the grid items wrap onto a second row one property handling spacing in both directions at once, which flexbox would need two separate approaches to achieve.
On the HTML side, <div class="grid"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div> three plain boxes, none of which need any grid-specific class or property themselves. They automatically become grid items and fall into place purely because of their parent's display: grid, the same 'parent does the work' pattern as flexbox.