Grid allows you to organize elements that span multiple cells. And those elements wrap automatically based on the number of columns or rows in your grid. You can also use dense to fill empty cells.
What are we going to cover in this video? Basically that. We’ll do it in six steps: we’ll place items in a div block in an incorrect order, which is our way of contriving a problem which will help us teach number four, we’ll make it a grid, we’ll adjust columns, we’ll reposition content (this is where we’ll use that contrived problem from number one), we’ll span things across multiple cells, and finally, we’ll design this so it works on different devices.
So before we do this first one. Let’s look inside this page. And we’ll go over to the Navigator. In the body, we have seven div blocks. Each div block has a background color and an image inside. One div block for each flavor. But all that’s important is that these div blocks are direct children of the body. Except not for long.
Why? Because we’re going to drag in a new div block. A fresh div block. Right from the Add panel. So. We’re dropping this right in the body. Then we’ll move all those other div blocks into this new div block. In the wrong order.
You might be asking yourself: “why is this happening to me?” That’s not important. What’s important is that now all of our original div blocks are children of this new div block.
So how do we control these children?
We can turn any type of container (like a div block) into a flex parent or grid parent. Flexbox is great for one-dimensional layouts (these are things usually sorted in a single row or a single column). We can switch to vertical. And we can play with the alignment controls. But let’s remove that property since we don’t want to use flex for this layout.
But what about grid? Grid is great for two-dimensional layouts.
All we just did was switch the display setting to grid. But the point is this: all the direct children of the div block? Each of them was distributed to its own cell. And they’re still direct children of the div block.
So that’s applying grid layout. What about adjusting the columns? As we add columns, each child element (these div blocks) automatically wraps to fill up the available space.
Obviously, adding columns increases the number of spots per row, and removing columns moves each div block on the end to the next line. But let's leave this for now and come back to it later.
What about repositioning? Let’s press done since we’re done editing our grid.
And because we believe in physics, let’s put them in ROYGBIV order. As everyone knows, the ROYGBIV order when applied to seltzer is, of course, Cran-Raspberry, Apricot, followed by Lemon, then Lime, then Pure (which is flavorless), Berry, and finally, Passionfruit, which we’re going to drag around the screen a bit to demonstrate that the other flavors (these other div blocks) are simply reordered, and still automatically position themselves.
Let’s talk spanning. Any direct child of a grid can span multiple cells. We’re just clicking and dragging to span multiple cells. Everything still flows around a child element that is spanned.
What happens if we try to reposition spanned content? You’ll see in a lot of cases, this can create empty cells. So here’s an option.
If we select the parent grid? We can edit. And once we’re editing, we can check this little thing that says dense. And what dense does is this. [Silence]
There’s nothing wrong with your audio. Except there might be. But it’s not this video. The silence was to demonstrate that dense is better seen than talked about.
Now. That sentence created a lot of what some people might believe is unnecessary confusion. The point is this: dense will fill any gaps with the next available grid child. And it will do this as long as that child will fit in the empty space.
So. Making it work across different views. This is fine on desktop. If we grab the edge of the canvas, we can test responsiveness and fluidity, and everything is instantly responsive.
Let’s check this on tablet and do the same thing. This layout scales really well.
What about mobile landscape? It also scales really well. And mobile portrait? That also works.
So that’s the end of this lesson. Except it isn’t. Let’s go back to mobile landscape. Let’s try a two-column layout here. We’re going to go in and delete our rightmost column. And we can see what happened.
Things that didn’t fit into that column (because it no longer exists) got knocked down to the next row. If we hit done, we can leave this as-is, or we can adjust some of these spanned items. Apricot originally took up four cells. Let’s shrink that to take up only one. We can do the same with the other spans down below. (We can take the children that are spanning two cells and make them span only one cell. We’re just dragging from the bottom right corner and resizing.)
And because it weighs more than the other cans, we can have Cran-Raspberry take up two cells.
And for mobile portrait? Let’s switch it up. We can demote Cran-Raspberry to normal status by making it span only one cell. And we’ll draw attention to the greatest flavor of all: none. Pure, unaltered seltzer water.
Now here’s a great point to be made: what happens if we move Pure up to the top? As we’re doing this, look at the Navigator. We can see the actual order of the grid children is changing. That’s because reordering any child set to auto? It also affects the document order.
That means if we go back to tablet, or if we go back to desktop, that updated order of elements is reflected. So instead, let’s go back to mobile portrait.
And hit undo. If we switch this one to manual, we can now successfully reposition it inside the grid. This means that while that child moves in terms of where it appears inside the grid, its placement in the document order is still exactly where it was before. Why is this important? Because if anyone’s using a screen reader or voiceover to navigate this layout, or any layout using grid, tabbing through content by default will follow the order you see here in the Navigator.
But changing this to manual does what we’d expect. It only affects the view we’re in, and any smaller views. Ad since we’re on mobile portrait, that means it only affects this view.
That also means if we go back to desktop now, it’s still where we left it. And Cran-Raspberry is still at the start.
So. What did we end up covering in this video? Everything. Minus a few things. We made a div block, we put stuff inside, we made it a grid, we adjusted columns, we repositioned content, we spanned things, and finally, we designed our grid across different devices.
