We create a grid container by declaring
display: grid or
display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.
In this example, I have a containing div with a class of wrapper and, inside are five child elements.
I make the
.wrapper a grid container.
All the direct children are now grid items. In a web browser, you won't see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work with the Grid Inspector, available as part of Firefox's Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value
grid. Click this and then the grid on this element will be overlaid in the browser window.
As you learn and then work with the CSS Grid Layout, this tool will give you a better idea of what is happening with your grids visually.
If we want to start making this more grid-like we need to add column tracks.