Hey folks, it’s Kayla from the Wix Studio team. I’m going to talk you through Section Grid.
Grid is a powerful responsive layout tool. The Studio editor has two grid tools – Section Grid and advanced CSS Grid. I’m only going to cover Section Grid here. CSS Grid is covered in another video.
I’ll show you how to add and customize a Section Grid layout, design each cell and adjust the grid per breakpoint.
Here we go.
There are a couple of ways to add a grid to a blank section. I have some preset layouts right here.
Or I can go to the floating panel and use these icons to add the cells I need to the left and right.
You can add new cells in between by selecting the section, and hitting the plus icon that appears here on the border between two cells.
And also add them to the left, right, top and bottom from here in the Inspector panel.
In addition to adding cells, you can split existing ones in half. Select the cell, and choose an option in the floating panel.
Let’s say I don’t want this one. I can just select and hit delete.
Now if I want to resize any grid cells, I’ll click and drag these blue handles.
To give the cells equal width or height, select the section and go to Equalize grid.
Nice, we’ve got our layout. Time to add style.
I can click on each individual cell and adjust the styling options like background color or rounded borders.
To add content, grab elements from the Add panel and drag them into the cell you want.
I’ll align these elements in the cell.
Next I’ll add an image. To do this just select the cell and hit Add Media.
Looks pretty good. I’ll add gaps between cells from here in the Inspector. And I want to create a bit of a border here around the grid as well. To do that, I’ll go down to the position box and add padding to the section.
Adding the gaps and padding reveals part of the section background, so if you want a different color here just change the section’s background color.
If you need to rearrange content and move it from one cell to another, there’s a quick way to do it. Just multiselect the cells you want to swap, and click Swap.
Alright. This is looking good. I’ll check it out on tablet.
Nice.
How about mobile?
Not the best layout for this screen size. But with grid, I can change up this layout on mobile without affecting the higher breakpoints. So let’s do that.
I’ll head over to Layout in the Inspector and just change to Rows here, which looks good.
Now, if I go back through the breakpoints, I’ve got a nice layout for each one. Perfect.
And if at any time I want to switch over to advanced CSS Grid, I can click right here. I’ll cover the advanced grid in a different video.
That’s it for Section Grid. Thanks for watching. Catch you next time.
