CSS Grid Container
Grid containers contains one or more grid items arranged in columns and rows. The direct child elements are automatically assigned as a grid item. A parent element becomes a grid container when its display is set to grid or inline-grid.
Grid Tracks
A grid track is the space between two adjacent grid lines. The rows and columns of a grid are defined by grid-template-rows and grid-template-columns. Its shorthand property is the grid or grid-template property.
The Grid-Templates-Columns property
This property defines the number of columns in your layout and the width of each column. The value is a space separated list and each value defines the width of that column.
Example 1:
We will build a grid layout with 4 columns each having a width of "auto". With this setting, all of the columns will have the same width.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
We can also set different sizes for each of the columns but this time we will keep the third column in auto so as to fill the remaining space.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Cell Sizing with fr Unit
The fr unit means fraction. This unit divides the available space and 1fr will become a reference for all the other column sizes.
Example 2:
Here, we will assign all of our column width to 1fr. This will render all of our widths equal similar to the auto value.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Now, we will assign the second column to be twice the column width of the others by setting its value equal to 2fr.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The Grid-Template-Rows Property
This property defines the height of each grid row. The value is a space-separated list just like the grid-tempate-columns properties. Each value also corresponds to the width of the row.
Example 3:
We will make the second row in our grid to have twice the height relative to its other rows by setting its value equal to 2fr.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The Justify-Content Property
This property is used to align grid items when they do not use all available space on the main axis horizontally. This property can have the following values:
- space-evenly
- space-around
- space-between
- center
- start
- end
Example 4:
For the first one, we will use the space-evenly value which displays the grid items with equal space around them. We will deliberately make the column width smaller to create the additional space:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Next is space-around value which displays the grid items with space around them:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The space-between value displays the grid items with space between them:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The center value displays the grid items in the center of the grid container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The start value displays the grid items at the start of the grid container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Last is the end value which displays the grid items at the end of the grid container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The Align-Content Property
This property is the same as the justify-content property but this time it aligns the grid items vertically. This property can have the following values:
- space-evenly
- space-around
- space-between
- center
- start
- end
Example 5:
For this example, we will use a grid container height of 600px and deliberately make the grid items height small so as to have additional space. The first one is space-evenly which evenly distributes the grid items vertically:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Next is space-around which displays grid items with space around them:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The space-between displays grid items with space between them:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The center value displays the grid items at the center of the grid container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The start value displays the grid items at the start of the container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Last is the end value which displays the grid items at the end of the container:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The Place-Content Property
This is the shorthand property for both the justify-content and align-content properties. This property has two values which are space-separated. If there is only one value, then it is assumed that both the justify-content and align-content will have that value.
Example 6:
We will set the value of place-content property to center for the grid container below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Next, we will try to set two values which are end and space-between. The first value is for align-content and the second value is for justify-content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
