How to create with advanced CSS Grid

Hey, I’m Kayla from the Wix Studio team and I’m gonna show you how to use advanced CSS Grids. 

CSS Grids let you control your elements using advanced measurement units to take more control over their responsive behaviors.

The cells of the CSS Grids aren't containers, like they are on Section Grids. Instead, they’re made up of columns and rows that direct your elements on how to behave across screen sizes. 

Unlike with Section Grids, where you can’t attach an element to two grid cells at the same time, in a CSS Grid, you can. 

This might be useful when you have a lot of elements overlapping that don’t necessarily all fit in the same Grid Structure.

You can convert an entire section grid into a CSS Grid  in the Inspector. Just right-click the section and select Switch to Advanced CSS Grid and click Apply.

You’ll see this warning, telling you that once you switch to CSS Grid, you cannot switch back to the Section Grid.

You can also apply a CSS Grid to a single Section Grid cell or a container in the same way.

Or, you apply a CSS Grid directly onto a section without using the section grid at all by clicking the Section and, under Layout, clicking Apply. 

But let’s say we switched the entire Grid to CSS Grid. Now the measurements used for advanced sizing reveal themselves. 

The measurements you see when you switch to a CSS Grid depend on whatever responsive behavior was on the grid before. These are the measurements that Wix Studio used behind the scenes to create the responsive behavior.

You might see Fr, which is a fractional unit that calculates the available space per column and row in a grid.

You can use fr to split up your grid into fractions, rather than having to work out precise values. 

So when you resize with the handles, you can see that the fixed column will always take up 100 pixels of space from the section, but the 1fr columns split the remaining space in half and fill it, no matter how much we scale down. 

To achieve that effect without fr, we’d need to figure out the exact percentage of the section remaining after the pixels, which would be… a lot of math.  

So let’s keep this set to fr. 

To learn more about fr, check out the full course on Wix Studio Academy.

Moving on, you can attach an element to multiple grid cells by dropping it into the area you want, and then holding Shift and clicking the grid areas you want in the Inspector.

To make the element fill the available space within the grid areas you’ve set, just click the stretch icon.

And when you delete a row…

…the elements you’ve placed in the Grid won’t expand to fill the new space.

 

This might leave a gap between the row you deleted and the edge of the section.

You can avoid this by setting the minimum height of the Grid to Auto, which will make the Grid conform to the content inside it.

This might not work if the Section’s minimum height is set to a value greater than the current height of the grid.

You can fix that by removing the minimum height from the section altogether.

You can add grid lines after the fact by clicking on a section and then clicking the Customize Grid on Canvas icon.

In this mode, you can drag to adjust existing grid lines or you can create new gridlines by dragging them in, from the edges of a section.

When you drag these lines close to a piece of content, they’ll snap to it, so it’s easy to align them with your design.

You can see the changes made in this mode won’t affect the content in the section.

To delete any of these grid lines, you can just right click and delete, or drag them to the edge you originally took them from. You can also delete them from the Inspector.

Now, when you leave this mode, you can use the grid as if it were any other CSS Grid.

And lastly, on mobile, you can turn all these columns into rows by clicking the grid, then changing the layout in the dropdown.

So that was how to create using advanced CSS Grids.

I’ll catch you next time.