Studio Editor: Working with an Advanced CSS Grid
In the Studio Editor, you can use an advanced CSS grid to organize the layout of elements and sections. You can choose the number of rows and columns you want, and set their size using responsive measurements (e.g. fr, Min/max, %). 
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.In this article, learn all about working with a CSS grid:
Switching from section grid to a CSS grid Applying a CSS grid on other elements Customizing a CSS grid Positioning elements in grid cells Table of grid unitsSwitching from section grid to a CSS gridSections in the Editor come with the option to set a section grid. This is an easy-to-use version of the advanced grid, based on the same CSS logic. Switching to an advanced CSS grid gives you more precise control of the layout per breakpoint.Note:Once you make the switch, it is not possible to go back to a section grid. However, if you just performed the action, you can use the Undo button  at the top right of the Editor.To switch from section grid to a CSS grid:
Select the relevant section in the Editor. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Layout. Click Switch next to Advanced CSS grid. Click Switch to CSS Grid.What's next?Customize the rows, columns and spacing from the Inspector panel. You can also drag grid lines on the canvas to move them.  Applying a CSS grid on other elementsYou can apply a CSS grid to container, lightbox, flexbox and repeater items. Specifically in the repeater element, once you apply a grid to one item, the rest update automatically.To apply a CSS grid:
Select the relevant element in the Editor. Click the More Actions icon . Click Apply Advanced CSS Grid. Choose a layout from the 1x1 drop-down.
Tip: Select Other if you want to set your own number of rows and columns. What's next?Customize the rows, columns and spacing from the Inspector panel. You can also drag grid lines on the canvas to move them.  Customizing a CSS gridCustomize your grid to get the exact layout you want. You can change the number of rows and columns, adjust their size and the gaps between them.To customize a CSS grid:
Select the relevant element or section. Choose how you want to customize the grid: Choose a different layoutThe drop-down that lets you choose a new layout is available in 2 places: 
On the element In the Inspector panelThe list of available layouts is based on the current number of rows and columns, suggesting different ways to organize the cells. Add more rows and columnsCreate the grid in a visual manner, looking at your existing layout while adding rows and columns. This doesn't change the elements' placement.
Click the Customize grid on canvas icon . Drag from the left or upper edges of the grid to add new lines.  Tip: You can add more rows and columns from the Inspector panel as well. Hover over the relevant row / column and click the More actions icon  to see this option. This might move elements around to create enough space for the new row or column. Change the size of your columns or rowsThere are 2 ways to change the size of the rows or columns on your grid:
In the Inspector panel: Enter the size and unit next to the relevant column / row number.

 On the page: Drag the handles on the horizontal and vertical gridlines to the position you want.
Tip: You can click the Customize grid on canvas icon  to drag the gridlines without affecting the elements' position. 
Delete a column or row
Click the More actions icon  next to an existing column or row. Click Delete column / Delete row.

Edit the size of the gapsYou can change the size of the gaps between the grid rows and columns by entering new values next to Gaps.Working with breakpoints:Your design only applies to the breakpoint you're working on. You should tailor the grid to each breakpoint to ensure the composition of your elements is flawless. In the example below, we set a different layout per breakpoint (3 columns on desktop vs. 3 rows on tablets). Positioning elements in a gridWhile adding elements to the grid, several tools can help you set their placement more accurately.Docking elementsDocking elements to the gridlines ensures they're positioned exactly as you want. In the Studio Editor, all elements are automatically docked, but you can adjust the docking manually and add margins. Moving elements between grid cellsUnder the Position section in the Inspector, you can select an element and see the grid cell it's in. Click any grid cell to move the element there, without having to use drag-and-drop. You can also enter the specific column and row numbers, which is useful when you need to place an element over multiple grid cells. Table of grid unitsUse the whole range of CSS units to create your grid. You can set the size of the columns and rows using percentages, fractions or pixels. Alternatively, set the minimum and maximum size of the columns and rows, or use calculations to create the grid you require. Percentage (%)Set the size of the columns/rows to take up a certain percentage of the grid.For example, if you set a row to 25%, it takes up 25% of the grid height. If you set a column to 10%, it takes up 10% of the grid width. Fraction (fr)Set the size of your columns/rows to be a fraction of the size of the parent container.For example, in a grid of 2 columns where the left column is set to 2fr and the right one is set to 1fr, the left column will take up 2/3 of the parent container.AutoThe height and width of the rows and columns are automatically set to fit the content inside them.Pixels (px)Set the size of your columns/rows to be a fixed number of screen pixels. Viewport width and height (vw and vh)Viewport is the visitor's browser window. You can set the size of columns or rows to be a percentage of the viewport width or height (accordingly). Min and Max contentSet the size of your columns/rows to never get smaller than the minimum content. Min/maxThis option lets you enter the minimum and maximum size of the row/column. CalculationWrite a formula to automatically calculate the size of a row/column. Dealing with overlapping elements?Review our troubleshooting video to learn what to check and how to resolve this issue.