Site is currently on development mode

Understanding grid placement through building a HTML periodical table

Last updated 1 year ago by Chen Hui Jing


I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved either a handful of explicitly placed individual grid items, or 100% automatic placement. I hadn’t had to design the gaps between the grid before, but then one fine day in March, I found a HTML periodical table on WebsiteSetupOrg.

It looks different now than when I first saw it, because the version I saw spelt out HTML and I was totally into that. Upon my usual right-click inspect, I noticed that the layout wasn’t using Grid, but my Grid-infused brain thought it could, so I decided to recreate the design using a Grid layout.

Grid manual placement

One of the best parts of using Grid for layout is the ability to place grid items exactly where you want on the grid you designed. Most of the planning for such designs would go into the actual grid itself.

But as a quick recap to how this works, let’s look at a relatively simple 3x3 grid, with 3 grid items on it. The Firefox grid inspector is turned on so we know which lines to assign our pieces to.

Like chess pieces on a chessboard
![Screenshot of a 3x3 grid with 3 grid items styled like a chessboard and pieces](

Actual visual styling aside, this is how the grid code looks like:

``` .grid { display: grid; grid-template-columns: repeat(3, 24vmin); grid-template-rows: repeat(3, 24vmin); }

.grid__item:first-child { grid-row: 3; }

.grid__item:nth-child(2) { grid-row: 2; grid-column: 2; }

.grid__item:nth-child(3) { grid-row: 3; grid-column: 3; } ```

grid-row and grid-column are shorthands to set the start and end line their respective dimensions. Grid items by default will only take up a single grid cell, so it works fine even though I only specify the start line without the end line for either property.

The concept behind manual placement of grid items is that you can position your item on the grid based on row and column numbers. No need for overly complicated positioning rules and calculations.

Read full Article