From the course: CSS: Advanced Layouts with Grid

CSS Grid means rethinking web layouts - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

CSS Grid means rethinking web layouts

“

- [Instructor] CSS Grid is a foundational change where web layouts are concerned. This is the first true two-dimensional layout tool that allows us to approach what is displayed in the browser view port as a whole rather than a random assortment of loosely related parts. Using CSS Grid introduces a whole new approach to web layouts and web design. We are now working from the outside in. Start with a grid, then place our contents on that grid. This in turn requires us to think carefully about the relationships between different items of content, both from an HTML semantics perspective, from a communication perspective, and from a layout and design perspective. This is what we'll be looking at in this chapter. To start off, let's address some not so obvious features in CSS Grid, because they'll help inform our work later. The first one is one of CSS Grid's key features. Only direct first-level descendants of a grid container are grid items. That means if you have descendants of descendants you want to place on the grid, you have to first create a new nested grid. In the original grid specification, there was something called subgrids, that allowed an element to inherit the grid layout from it's parents, but that has not been implemented in any browsers. As a result, you may feel compelled to flatten your HTML to make every item a direct descendant of the grid container. This is not a good idea. The whole point of CSS Grid is to be able to work with semantic and properly nested HTML markup. Instead, embrace the idea of grid nesting, create multiple grids within a single view to address different concerns. You can have one grid for overall layout, another for the main content, and more specific ones for individual content blocks. You'll see all of this when we move on in this course. The second feature is that CSS Grid creates a true grid. By that, I mean, you're not working with strict rows and columns. One of the very first things people tried to do when CSS Grid came to browsers was to create masonry style layouts for the height of each item as defined by its contents, and you get this organic semi-random structure. This is not a grid, in fact, it's the antithesis of a grid. The purpose of a grid is to establish clearly defined grid tracks in the form of columns and rows and place contents within these tracks. This means you have to think carefully about how the length of the contents of one cell affects the height of the whole row. This takes some practice, and you'll find that in many cases, the absoluteness of the grid tracks may seem to get in the way of what you're trying to do. In my experience, this is because you're trying to use one grid or multiple nested grids are required. We'll cover some concrete examples of this later in the course. The third feature is content stacking. Any grid item can be placed in any grid cell or group of cells on the grid, and when you manually place items in a cell, the browser will allow you to place multiple items on top of one another in that same cell. The items are displayed in their HTML source order, meaning the further down in the HTML document an item is, the higher up in the stack it appears. You can then manipulate the zed index position of individual items to bring them to the surface or hide them under other items. As you'll see later on, this makes things like positioning text on top of images absurdly easy and does away with the complex absolute positioning and other hacky solutions we've been using so far. On the downside, if you don't play close attention to where you place your items, you can easily cover something important, so pay attention and check everything you do in the browser, especially when you're doing manual positioning. The fourth feature is content ordering. Thanks to the ability to place any grid item anywhere within the grid, you can visually change the order of your content without changing HTML markup structure. This can be a huge benefit, but it also invites some risky behavior and can cause serious accessibility issues. I'll talk more about this later on, but the rule of thumb here is to make sure you don't change the meaning of your content by changing it's display order. A visitor should get the same content in the same structured order, whether they look at the CSS Grid layout or just read the HTML from top to bottom. The fifth and final feature, is simply that CSS Grid is pure CSS. Once you've properly marked up your HTML, you can do pretty much whatever you want with your layouts, because the grid is purely visual. You can toggle grids on and off or change their columns, rows, grid areas or anything else at anytime, using media quarry's or java script or whatever you like. CSS Grid gives you a truly dynamic design interface where you can serve up any grid at any time and place any item anywhere you like within that grid. You're never confined to a grid, and there's no reason you need to use the same grid to do different things. So, make grids that work, and if they don't do what you want, just change them until you get where you want to go.

Contents