Choose columns, rows and gap and copy ready-made CSS Grid code.
The output sets display: grid, then grid-template-columns: repeat(3, 1fr) and the same for rows. 1fr means one share of the free space, so every column gets the same width. gap adds space between cells but not around the outside edge. Rows set to 1fr share the container's height, so they only stretch if the container has a height; otherwise each row is as tall as its content.
Children of the container fill the cells in order, left to right and then down, without needing any CSS of their own.
A fixed number of columns can be too many on a phone. A popular next step is grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), which fits as many columns of at least 200px as there's room for. You can also change the column count inside a media query.
One fraction of the available space. Three columns of 1fr each take a third of the width.
Grid for two-dimensional layouts with rows and columns, Flexbox for lining items up in one direction. Try the Flexbox Generator for that.
Yes, with grid-column: span 2 on the item, though this tool doesn't set that.
Yes. Every current browser supports it.
OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.