The grid container
The HTML is one container, a div with class grid, holding five child divs, A to E. With no CSS yet they are block boxes in normal flow: each takes the full width, and they stack top to bottom.
display: grid; makes the div a grid container, and its five children become grid items. No columns are set yet, so the grid has a single column and one row per item: the items still stack.
Columns and fr
grid-template-columns lists the column tracks from left to right: 100px, 1fr and 2fr. Three tracks sit between four grid lines, numbered 1 to 4. The items flow into the cells in source order.
fr means a fraction of the free space. The container is 400px wide and the 100px track takes 100px, leaving 300px. 1fr plus 2fr makes 3 shares of 100px: the middle track gets 100px, the last 200px.
Rows, gaps and spans
Three columns hold three items per row, so D and E wrap onto a second row. You never declared any rows: the browser creates them as needed. These are implicit rows, sized to fit their content.
gap puts a 15px gutter between neighbouring tracks, both columns and rows, but not around the outside. The two column gutters take 30px, so free space drops to 270px: 1fr is now 90px, 2fr 180px.
grid-column: 1 / 4; places item A from column line 1 to line 4, across all three tracks. Auto-placement then fills the next free cells: B, C and D in row 2, and E starts row 3.
Every screen size
The CSS does not change, but on a narrow screen the container is only 280px wide. The 100px track stays 100px and the gutters 30px; the fr tracks share the 150px left: 50px and 100px.
What happens
;; step 1/8 · items
index.html, inside <body>:
<div class="grid">
<div class="a">A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
normal flow: 5 blocks, each 400px wide, stacked
(the container is 400px wide in this example)
A real browser applies all the declarations at once when it lays out the page. The figure applies them one at a time, in the order of the stylesheet, so you can see what each one does. No row sizes are set, so each row is only as tall as its content, one line of text here. The figure draws the rows taller, and the blocks a little inside their cells, so the letters are easy to see.