CSS Grid

Grid layouts are fundamental to the design of websites, and the CSS Grid module is the most powerful and easiest tool for creating it. In this article, I’ll take you through the very basics of CSS Grid as quickly as possible. I’ll be leaving out everything you shouldn’t care about until you’ve understood the basics.

Grid Container

Create a grid container by setting the display property with a value of grid or inline-grid. All direct children of grid containers become grid items.

display:grid;

Grid items are placed in rows by default and span the full width of the grid container.

Explicit Grid

Explicitly set a grid by creating columns and rows with the grid-template-columns and grid-template-rows properties.

A row track is created for each value specified for grid-template-rows can be any non-negative, length value (px,%,fr etc).

Now let us look at some of the grid container’s properties:

1) The grid-template-columns property

The fundamental use of grid-template-columns-property is to specify the total number of columns in the grid layout and it can also be used to specify the width of those columns.

The values of this property are space-separated lists where each value would define the length of every column.

For instance, if you wish to add 4 columns in your grid layout, just specify the width of the 4 columns or just type in auto for every column to have the same width.

Syntax:

Element {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

2) The grid-template-rows property

This property is the opposite of column property, in this, you can define the height of each row in the grid.

Syntax:

Element {
    grid-template-rows: 50px 100px;
}

3) Minimum and Maximum Grid Track Sizes

Tracks sizes can be defined to have a minimum and/or maximum size with the minmax() function.

4) Repeating Grid Tracks

Define repeating grid tracks using the repeat() notation. This is useful for grids with items with equal sizes or many items.

eg. grid-template-rows: repeat(4, 100px);

5) Grid Gaps

The grid-column-gap and grid-row-gap properties create gutters between columns and rows.

Grid gaps are only created in between columns and rows, and not along the edge of the grid container.

6) Spanning Items Across Rows and Columns

Grid items span only one column and row tracks by default but can span multiple rows and/or column tracks using the same properties to position them.

7) Naming and Positioning Items by Grid Lines with the Same Name

Lines can be assigned the same name with the repeat() function. This can save you time from having to name each line in track definitions.

grid-template-rows: repeat(3, [row-start] 1fr [row-end])

Implicit Grid

An implicit grid is created when a grid needs to position items outside of the explicit grid because there isn’t enough space for items in the explicitly defined tracks or you decide to position something outside of the explicit grid. Those items are then auto-placed in the implicit grid.

The implicit grid can be defined using the grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.

grid-auto-flow: row

The default flow (direction) of a grid is row.

grid-auto-flow: column

A grid’s flow can be changed to column.