Set columns, rows, track sizes, gaps and named areas, then copy the grid CSS and a child placement example.
The page writes one container rule from your choices. With the defaults, 3 columns, 2 rows and a 16 px gap, you get display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 16px;. When every track has the same size, the page writes repeat(count, size) instead of listing it three times. When the column gap and row gap are equal it writes the short gap property, and otherwise it writes column-gap and row-gap. A gap of 0 is left out. Columns and rows can each be 1 to 12, and gaps 0 to 200 px. Below the container rule, a second block shows a child example, such as grid-column: 1 / span 2, so you can see how an item takes more than one cell.
Column sizes and Row sizes accept one size for every track, or exactly one size per track. Type 1fr for three equal columns, or 200px 1fr 2fr for a fixed column and two flexible ones in a 1 to 2 ratio. The accepted sizes are fr units, px, %, em, rem, vw, vh and ch lengths, auto, min-content, max-content, minmax(min, max) and fit-content(length). The first value inside minmax can be a length, a percentage or a keyword, and the second can also be an fr value. Anything else is refused with a message under the box: calc(), negative numbers, 0fr and sizes with more than 3 decimals are not accepted. If you give the wrong number of sizes, the message says how many are needed. An empty box means 1fr for columns and auto for rows.
Named areas let you place items by name instead of by line numbers. Type one word per cell and separate rows with a slash, for example header header header / side main main / footer footer footer for 3 columns and 3 rows. A dot marks an empty cell. The page checks the shape before it writes anything: the number of rows and words must match the grid, names must start with a letter, and each name must fill one solid rectangle, because CSS rejects an L-shaped area. The result is a grid-template-areas value on the container, and the child block lists a rule such as .header { grid-area: header; } for each name.
This page has no picture of the grid. Its preview box cannot show a grid layout, so the page gives a text table of the layout instead, one row per grid row, with the size of each track in the headers and the area name or cell position in each cell. Paste the CSS into your own page to see the real result. The page writes only the container rule and the child example. It does not write grid-auto-flow, auto-fit or auto-fill columns, alignment properties or subgrid. Nothing you type is stored or uploaded; the CSS is worked out in your browser.
Set Columns to 3 and leave Column sizes as 1fr. The page writes grid-template-columns: repeat(3, 1fr);, which makes three columns of equal share. Use 1fr 2fr 1fr instead if the middle column should be twice as wide.
fr is a share of the free space left after fixed sizes and gaps are taken out. In 200px 1fr 2fr the first column is 200 px, and the other two split the rest in a 1 to 2 ratio. On a 900 px container with a 16 px gap that leaves 900 - 200 - 32 = 668 px, so the columns get about 222.7 px and 445.3 px.
Type different numbers in Column gap and Row gap, for example 24 and 8. The page then writes column-gap: 24px; and row-gap: 8px;. If both are 16 it writes gap: 16px; instead.
The areas must match the grid and each name must form one rectangle. For 3 columns and 2 rows you need 2 rows separated by a slash and 3 words in each. A name used in two separate places, or in an L shape, is refused because CSS would drop the whole grid-template-areas value.
minmax is accepted for each track, such as minmax(100px, 1fr). repeat(auto-fit, ...) and repeat(auto-fill, ...) are not written by this page, because they depend on the width of the container instead of a fixed count. Copy the CSS and edit that line by hand if you need them.
No. The CSS is worked out in your browser and nothing is uploaded or stored. Page visits are counted with Google Analytics, never what you type.