Web Design at Georgetown CollegeBeta

CSS Grid Layout Basics

Defining a Grid

Use the following CSS to set a grid on a containing element. The direct children of that element will be laid out on the grid automatically or can be placed as desired.

The example below defines three 100px columns, but this can be anything you desire. Rows don't necessarily have to be defined – they will be automatically created as needed with an automatic height.

display: grid;
grid-template-columns: 100px 100px 100px;

View example

Specifying Placement

You can specify the placement of individual elements on the grid by using the following CSS. It can be helpful to draw out your grid and number the lines to visualize what these properties are doing.

grid-column: 1 / 2;
grid-row: 1 / 2;

View example

Elements can also span multiple grid tracks using these same properties.

grid-column: 2 / 4;
grid-row: 1 / 3;

View example

Other ways to specify placement on the grid