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;
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;
Elements can also span multiple grid tracks using these same properties.
grid-column: 2 / 4; grid-row: 1 / 3;