A grid container comprises grid items. By default, each row and column in the container has one grid item. However, you can customize the styling of these grid items to span across multiple columns and/or rows.
The grid-column property determines the column(s) where an item is positioned. It specifies both the starting and ending points for the item within the grid.
| Please note that the grid-column property serves as a shorthand for both the grid-column-start and grid-column-end properties. |
To position an item, you have the option to reference line numbers or utilize the keyword “span” to specify the number of columns the item will cover.
Example
Adjust “item1” to commence at column 1 and terminate prior to column 5.
| .item1 { grid-column: 1 / 5; } |
Example
Position “item1” to begin at column 1 and extend across 3 columns.
| .item1 { grid-column: 1 / span 3; } |
Example
Position “item2” to commence at column 2 and cover a span of 3 columns.
|
.item2 { |
The grid-row property specifies the row where an item is positioned, determining both its starting and ending positions within the grid.
| Please note that the grid-row property acts as a shorthand for both the grid-row-start and grid-row-end properties. |
To position an item, you can reference line numbers or utilize the keyword “span” to specify the number of rows the item will cover.
Example
Adjust “item1” to commence at row-line 1 and conclude at row-line 4.
| .item1 { grid-row: 1 / 4; } |
Example
Position “item1” to begin at row 1 and extend across 2 rows.
|
.item1 { |
The grid-area property provides a shorthand for specifying the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
Example
Position “item8” to start at row-line 1 and column-line 2, and conclude at row-line 5 and column-line 6.
| .item8 { grid-area: 1 / 2 / 5 / 6; } |
Example
Adjust “item8” to commence at row-line 2 and column-line 1, spanning across 2 rows and 3 columns.
| .item8 { grid-area: 2 / 1 / span 2 / span 3; } |
The grid-area property can also be utilized for assigning names to grid items.
Grid items assigned with names can be referenced using the grid-template-areas property within the grid container.
Example
In a grid layout comprising five columns, “myArea” is assigned to Item1, spanning across all five columns.
| .item1 { grid-area: myArea; } .grid-container { grid-template-areas: ‘myArea myArea myArea myArea myArea’; } |
Each row is delineated by single quotation marks (‘ ‘).
Within these marks, the columns in each row are specified, separated by spaces.
| Please note that a period symbol denotes a grid item without a name. |
Example
In a grid layout with five columns, assign “myArea” to span two columns. Items without a name are represented by period signs.
| .item1 { grid-area: myArea; } .grid-container { grid-template-areas: ‘myArea myArea . . .’; } |
To specify two rows, enclose the column configuration of the second row within an additional pair of single quotation marks.
Example
Adjust “item1” to span across two columns and two rows.
| .grid-container { grid-template-areas: ‘myArea myArea . . .’ ‘myArea myArea . . .’; } |
Example
Assign names to all items and create a complete webpage template.
|
.item1 { grid-area: header; } |
The Grid Layout enables us to position items flexibly according to our preferences.
The initial item in the HTML code isn’t required to be displayed as the first item in the grid.
Example
|
.item1 { grid-area: 1 / 3 / 2 / 4; } |
You have the option to rearrange the order for specific screen sizes by employing media queries.
Example
| @media only screen and (max-width: 500px) { .item1 { grid-area: 1 / span 3 / 2 / 4; } .item2 { grid-area: 3 / 3 / 4 / 4; } .item3 { grid-area: 2 / 1 / 3 / 2; } .item4 { grid-area: 2 / 2 / span 2 / 3; } .item5 { grid-area: 3 / 1 / 4 / 2; } .item6 { grid-area: 2 / 3 / 3 / 4; } } |
