From the course: CSS Layouts: From Float to Flexbox and Grid
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Positioning with Grid - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Positioning with Grid
- [Woman's Voice] Now that we've gone over how to create a grid and define rows and column sizes, let's talk about how to position items on the grid. Grid lines divide the grid into columns and rows and are numbered left to right and top to bottom. Both the vertical and horizontal grid lines start at one. For left to right languages such as English, line one begins on the left side of the grid. And the item will span one grid cell, ending at line two. If you're working in a right to left language, then grid lines are numbered from the right to the left beginning on the right. You can also use a negative numerical index to reference the opposite end of the grid. By default, items appear in the same order as the HTML inner placed within one grid cell. We can change the placement of the grid items by specifying the start and end line with the following properties. Grid column start, grid column end, grid row…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.