From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Positioning with grid lines

Positioning with grid lines

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Positioning with grid lines

“

- [Instructor] Another useful feature of grid layouts is the ability to change the positioning of grid items using line based placement. By default, each grid is placed into one grid cell and appears in the same order as defined in the HTML. However, grid items can be placed into grid areas that span across multiple rows and columns by referencing the grid lines. Grid lines run horizontally and vertically across the grid and are numbered starting from one. Negative numbers can also be used to reference the lines from the opposite end of the grid. The grid column and grid row properties can be used to define a grid items size and placement within the grid using grid lines. These two properties are also shorthand for grid column start, grid column end, grid row start, and grid row end. To change the column placement of grid item, use grid column start and grid column end to specify its start and end position. The value…

Contents