From the course: Practice It: CSS Layout
Join today to access over 24,700 courses taught by industry experts.
Defining grid elements - CSS Tutorial
From the course: Practice It: CSS Layout
Defining grid elements
- [Instructor] All right, let's dive into some code. Here I have an HTML sheet with a div with the class container, and it contains three children. Item one, item two, and item three. Obviously it doesn't look like much yet so let's add in some CSS. So when setting up a grid layout. the first thing we need to do is to define the display. We're going to be working with grid, inline grid, and flex but we're going to start with grid. So I'll get our class container and add a display of grid. And then I'm also just going to declare the width and heighth, give it 100% width and a height of 100 VH. So it fills the screen and I'm going to give it a border so that we can see it on the page. Okay, so here we have our container div taking up the whole page. And now we're ready to set up our grid. So here we'll declare grid template rows and grid template columns and we'll assign them values like names and sizes. So for grid…
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.
