From the course: CSS: Advanced Layouts with Grid (2017)
Join today to access over 24,200 courses taught by industry experts.
Manual grid item placement - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid (2017)
Manual grid item placement
- [Instructor] What makes CSS Grid such a powerful layout tool is it allows us to specify where on the grid any of the grid items should appear. In other words, once you use CSS Grid, you can put any item anywhere you want in the grid using only CSS, which is pretty magical. The most basic method for placing grid items on the grid is to declare the grid-column and grid-row values for each item. Grid-column and grid-row each take values corresponding with the lines on the grid, so if you want to place an item between column lines two and four, you just declare grid-column two slash four, and if you want to place an item between row lines two and three, you just declare grid-row two slash three. Using this technique, you can take each grid item in any layout and place it where it belongs in the grid. If we take the current example, where we have the auto-placed contents, we can now move each of these items around to create the layout we want. So first, I want to move the masthead over…
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.