Editor X: Using Grids
CSS grids are a great way to ensure your elements are organized in a structured manner. In Editor X, every container and section comes with a built-in grid. You can choose the number of rows and columns your composition requires, and adjust their size in many different measurements. In this article, learn all about working with Grids in Editor X:
Adjusting an existing grid Managing a grid from the Inspector panel Positioning elements in a grid Available grid measurement unitsWant to learn more?Check out our lesson on grids in the Editor X academy. Adjusting an existing gridEvery section and container comes with a built-in 1x1 grid that you can adjust. Switch to a different layout in one click, or create your own grid by dragging the lines over your existing composition. To adjust the grid:
Click the relevant container or page section. Change the grid in one of the following ways:Choose a layoutNeed a quick and easy grid? Choose one of the available layouts (e.g. 2x1, 2x2), or click Other to set the number of rows and columns yourself.Note: This may change the positioning of your elements. Customize grid on canvasThis option allows you to create the grid in a more visual manner, dragging the lines to add more rows and columns. This doesn't change the placement of your existing elements.To customize the grid:
Click the Customize grid on canvas icon . Drag from the left or upper edges of the grid to add new lines.  Tip:You can also add a section with a built-in grid, by clicking the Add Section icon .Managing a grid from the Inspector panelCustomize 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 manage a grid:
Click the relevant grid. ﻿Click the Inspector icon ﻿ at the top of Editor X. Click the Layout tab  and scroll down to Display. Choose what you want to do:
    
Choose a different layout: Click the Layout drop-down to select a different look that contains the same number of cells as the existing grid. Adjust your grid manually: Click below to learn how to:  Add more columns or rowsYou can add more columns or rows to your grid in the following ways:
Click the Add icon  next to Columns or Rows. Click the More Actions icon  next to an existing column or row and select an option:
    
Add column / row left Add column / row right  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. Edit the size of the gapsYou can change the size of the gaps between your grid's rows and columns by entering new values next to Gaps.Delete a column or row
Click the More Actions icon  next to an existing column or row Click Delete column / Delete row.Working with breakpoints:When designing a grid, it only appears on the specific breakpoint you're working on. You should create a grid for each and every screen size to ensure the composition of your elements is flawless. Positioning elements in a gridWhile adding elements and placing them on your grid, there are various tools to help you create a responsive layout:Docking elementsDocking elements to the gridlines ensures they're positioned exactly as you want. When you add an element to a grid cell, it's automatically docked to the closest vertical and horizontal gridlines. You can adjust the docking as needed from the Inspector panel. Move elements to a different grid cellUnder the Position section in the Inspector, you can select an element and see the grid cell(s) it's positioned in. Click any grid cell to move the element there, without having to use drag-and-drop. Stretching elements to fill a grid cellStretch elements to fill a grid cell in just a click. If an element is positioned over the gridlines of more than one cell, it is stretched over all the cells it is located in.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, pixels or fractions. You can also set the minimum and maximum size of the columns and rows, and even use calculations to create the grid you require. Note:You can set the size of your rows and columns in different units. By default, the units for rows are in pixels, and the units for columns are in fractions (fr). UnitUnit TypeExplanationFraction (fr)FluidSet the size of your columns/rows to be a fraction of the size of the page section/container. E.g. in a grid of 2 columns, if 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 section/container.AutoFluidThe height and width of the rows and columns are automatically set to fit the content inside them.Percentage (%)FluidSet the size of your columns/rows to be a percentage of the section/container.Pixels (px)FixedSet the size of your columns/rows to be a fixed number of screen pixels of the section/container. 1px = 1/96th of 1inch.Viewport Width (vw)ViewportSet the size of your columns/rows to be a percentage of the width of the viewport (the browser window size). E.g. if the viewport is 50cm wide, 1vw = 0.5cm.Viewport Height (vh)ViewportSet the size of your columns/rows to be a percentage of the height of the viewport (the browser window size). E.g. if the viewport is 50cm high, 1vh = 0.5cm.Min/MaxOtherSet the size of your columns/rows to a minimum and maximum measurement. You can choose from any of the grid units when using the option.Min ContentOtherSet the size of your columns/rows to never get smaller than this minimum content. Max ContentOtherSet the size of your columns/rows to never get larger than this maximum content.CalculationOtherCreate a calculation using any of the grid units to set the size of the columns/rows.