Grid Cell: What It Is, How It Works & How to Use It

Diagram showing an individual cell on the grid.

If you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm. Additional row or column tracks will be created to create enough cells to hold all items.

Example

In the example we have created a three column track grid. The five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two.

                                        
                                            *
                                            {
                                            box-sizing
                                            :
                                            border-box;
                                            }
                                            .wrapper
                                            {
                                            border
                                            :
                                            2px solid #f76707;
                                            border-radius
                                            :
                                            5px;
                                            background-color
                                            :
                                            #fff4e6;
                                            }
                                            .wrapper >div
                                            {
                                            border
                                            :
                                            2px solid #ffa94d;
                                            border-radius
                                            :
                                            5px;
                                            background-color
                                            :
                                            #ffd8a8;
                                            padding
                                            :
                                            1em;
                                            color
                                            :
                                            #d9480f;
                                            }

css

                                        
                                            .wrapper
                                            {
                                            display
                                            :
                                            grid;
                                            grid-template-columns
                                            :
                                            repeat
                                            (
                                            3,
                                            1fr)
                                            ;
                                            grid-auto-rows
                                            :
                                            100px;
                                            }

html

Grid Cell

Example

See also

Property reference

Further reading