CSS Grid Container

Grid container

The grid container is the outer element that contains the grid layout.

All of its direct children are grid items.

To make an element a grid container, set its display property to grid or inline-grid.

The difference is an element with display: grid will be a block element,

whereas an element with display: inline-grid will be an inline element.

Making simple grid container -

Example –

Output -

Now we will see some extra properties -

The grid-template-columns Property -

Property grid-template-columns and grid-template-rows.

These define the size of each of the columns and rows in the grid.

This example uses a new unit, fr, which represents each column’s (or row’s) fraction unit.

This unit behaves essentially the same as the flex-grow factor in flexbox.

The declaration grid-template-columns: 1fr 1fr 1fr declares three columns with an equal size.

You don’t necessarily have to use fraction units for each column or row.

You can also use other measures such as px, em, or percent.

Or, you could mix and match.

For instance, grid-template-columns: 300px 1fr would define a fixed-size column of 300 px followed by a second column that will grow to fill the rest of the available space.

A 2 fr column would be twice as wide as a 1 fr column.

Example 1 - Using values - grid-template-columns: 80px 200px 150px 40px;

Output

The grid-template-rows property

The declaration, grid-template-rows: repeat(4, auto); defines four horizontal grid tracks of height auto. It’s equivalent to grid-template-rows: auto auto auto auto. The track size of auto will grow as necessary to the size of its content.

Example -