Creating a Classic Web Layout Using CSS Grid (video ~9 minutes)
In the latest video from Mozilla Developer, the presenters demonstrate a quick way to get started with CSS grids. While the specification may seem daunting and complicated, interesting layouts can be created with minimal code. The author begins by adding 'display: grid' to the body, noticing that not much changes at first glance. The default grid resembles standard block flow, allowing for its safe implementation without immediate layout changes expected.
Next, the author adds spacing between grid elements, which becomes simpler with the use of the 'grid-gap' property. By setting the grid gap to 1em, the author notes that all blocks separate from one another by that value. Using the inspection tool in Firefox, they visualize the grid, seeing line numbers and area tags, illustrating how the grid generates an implicit layout, even without defined sizes at first.
The next step involves defining specific rows of the layout using 'grid-template-rows', where the author can set different sizes for the header, nav, main content, and footer, contributing to a more complex layout. By setting a minimum height of 100vh, extra space for the main section is created, improving the mobile layout.
Furthermore, Mozilla Developer presents how to achieve a more advanced layout through media queries, allowing the layout to adapt to various screen widths. By using 'grid-template-columns', the author transitions smoothly to a desktop view with a sidebar and main content. The author mentions the ability of grids to combine fixed units with fluid ones, which is a significant advantage of this method. Additionally, three rows are defined for effective space management.
Finally, the ability of named areas in grids is discussed. By assigning names to sections like header, nav, and main, the layout can be easily controlled. The author introduces the concept of grid template areas, which can be used to visually represent layout design. An example of using ASCII art for layout visualization shows how simply one can create a responsive layout that is easy to modify. At the time of writing this article, the video has received 55386 views and 2328 likes, indicating positive reception from the community.
Toggle timeline summary
-
Introduction to CSS grids and starting point.
-
Overview of the capabilities of CSS grids.
-
Adding display grid to the body to create layouts.
-
Explaining the concept of grid gaps for consistent spacing.
-
Using Firefox grid inspector to visualize the grid layout.
-
Understanding implicit grids generated automatically.
-
Setting grid template rows to control layout sizes.
-
Adjusting the minimum height for grid areas.
-
Creating more complex layouts with media queries.
-
Mixing fixed and fluid units for reliable grid layouts.
-
Using grid column spans to control element width.
-
Demonstrating responsive behavior of the grid layout.
-
Assigning grid areas to header and navigation.
-
Introducing grid template areas for layout definition.
-
Adjusting layout structure in media queries.
-
Final thoughts on getting started with grid layout.
Transcription
I want to show you a quick way to get started with CSS grids. I know the spec can be daunting, there's a lot that it can do, but we can start to do some fairly interesting layouts with just very little code. So I'm going to start here by just adding display grid to the body, and you can see that nothing really changes here. The default grid is very much like the default block flow. We can put it in there pretty safely without expecting much to happen. Now one of the cool things about grid is that we can add gutters in a more consistent way, so I'm going to do that. I'm going to add, it's called grid gap of 1em, and all of my block elements will jump apart by that much, so the grid gap goes between each of the grid areas. I'm going to inspect this in Firefox nightly here, and I've opened the grid inspector here in Firefox, and you can see here the body now has this little tag next to it that says grid, and I'm going to click on that, and that's going to show us the grid visually here in the main window, and you can see it's added lines around each area, it's added this shading over the gutters, and we have these line numbers. So the first line is 1, and then the second line is 2, 3, 4, 5, so we've automatically got five grid row lines down the page, and just 1 and 2 across. There's also a negative 1 indexed going backwards, so that's just happening automatically. I'm going to turn that off quick. So what we have there is the implicit grid that's generated automatically when we create a grid and we haven't defined it yet. What I'm going to do now is add some grid template rows, so rows go down the page, and I'm just going to give some sizing to these things. I'm going to say that the first one is auto-sized, that's the header, then the nav is also going to be auto-sized, and then the main content is going to be one fraction, which means it can take up as much space as it needs to in the layout, however much space is remaining. And then the footer, again, I'm going to set to auto. Now that didn't change anything yet because there's no extra space there for the main area to take up, so I'm just going to add some extra space with a min height of 100 VH, that's viewport height, so it's going to be at least the height of the viewport. And you can see that because of the rows, if I didn't have grid template rows there, they would all expand in a similar way, but by adding the grid template rows, I've made it so that now the main area takes up more space and the others stay the same size. So this might work for us as a mobile layout, and we might not even worry about the grid fallback for mobile because it's fairly similar. There's not really much happening here yet. I'm going to try to create then inside of this media query, so for any page over 40 M's wide, we're going to add a little bit more complex layout. Again, we're going to use grid template columns, but we're going to set up a sidebar that's 12 M's and then a main space that's one fraction that takes up all of the remaining space available in the window. And you can see that everything sort of falls into place there automatically. The first column stays 12 M's, and the second column takes up whatever space is left. And that's pretty cool because that means that we can start doing layouts that really mix fixed units with fluid units in a more reliable way, which is a really nice thing about grid. And then I'm going to say we actually want three rows, so right now it's giving us two by default. We want three rows. The first one's going to be auto size, the second one's going to be as much space as we need, and then the footer will go along the bottom. So if I define those three rows, auto, one fraction, auto. Right now, we're not seeing that last row. It's collapsing because there's nothing in it. And what I'm going to do is tell the header to span two columns. I added grid column span two to the header, and that made it take up the entire top space. Instead of making the footer go the whole way across, I'm going to make the nav go the whole way down that side. So I'm going to add nav grid row span two, and it will go down that whole side, and then main and footer are both being pushed into place. I don't have to be more explicit here if I don't want to be. I could if it's useful for some reason, but you can see here now we have a mobile view on small screens, and when I make the screen bigger, it jumps to this layout. I can also change the height of the window, and you can see again that main and nav are stretching as much as they need to to take up the space, while the header and footer always remain the same size, and it's this sort of sticky footer where if the window gets big, the footer is still there, but if the window is smaller, we're able to scroll. Once we have these named areas, the only thing that we have to do then to make our header and navigation span the multiple columns and rows is assign them a grid area. So we say header, grid area banner, nav, grid area nav, main, grid area main, et cetera, and by giving them these names, we can just change in one place what the layout that we want is going to look like, and then that will change for anything assigned to that area. You can see there I changed banner to just span one. I could make nav come up here into the header, and it will take over that space, and that means that the parent element, in this case the body, can sort of control the layout from one place. So we can set up multiple layouts at different screen sizes or in different contexts, and everything else will fall into place. Another thing that we can do with grid that is really helpful for getting started is use this grid template areas. It's a way of using sort of ASCII art to define a layout. So I've defined our mobile layout here by just giving names to the four different areas we have in mobile, and let's just see them there. We have a banner, nav, main, and footer, and then I can add at a media query. All I have to do at a media query is change the structure of those areas. So now I've made banner go across two columns, and then nav in a single column, and then main side by side, and then nav and footer also side by side. So you can see here the banner is going to go across the top, the nav is going to come down the side, and then main and footer are going to fill in the gaps, and when we extend our window, that's what we see happen. And I think that's just a great way to get started with grid. That's really sort of the terms and pieces of code that you need to get started. And you can see that some of the fallbacks are going to happen in some ways automatically. If you turn off grid, you'll automatically get the mobile layout that you started with, and you can build on top of that. Have fun and get started with grid.