Editing the grid.
The grid is versatile. It can be a simple layout of 2 cells, or a complex one with multiple rows and columns of different heights and widths.
Edit grid mode.
Click Adjust Grid, then Edit Grid to manually customize your grid layout and dimensions. You can choose the units of measure and add or remove columns and rows. Control columns using the toolbar above the grid and rows using the toolbar on the left.
TRY IT YOURSELF
Exercise on grid editing.
Open Academy X from desktop to complete this exercise.
Adding and removing columns & rows.
Add a column or row by clicking on the relevant toolbar and hovering until the + is shown. To remove, click on the column or row in the toolbar and choose Delete.
In Edit Grid mode, you can also adjust the gaps between columns and rows.
These gaps are always in px and are added between columns and rows.
There are 3 ways you can resize:
1. Drag the gridlines of the columns or rows themselves.
2. Use the drag handles from the toolbars. This affects the entire grid because all other columns or rows adjust proportionally.
3. Manually change the size of a column or row by clicking on the measurement on the grid.
Min/Max lets you set the minimum and maximum size for a column or row. This is the default measurement for rows. By default, Min is measured in px and Max is measured by Content. Since Min is a pixel value, there is a limit to how small the row can be, so it will never collapse. And since Max is sized according to content, the row will grow and shrink in response to the content inside.
Changing a grid
You can edit your grid at any breakpoint to suit your design. Add, remove and edit columns and rows, remove the grid completely or set a whole new grid.
Fr stands for fraction and 1fr is 1 part of the available space. This measurement is the default for columns. For example, in a grid with 3 columns, you could have 1 column that's 50px wide and the other 2 columns are 1fr and 2fr. This means that in the space left, without the 50px, the column that’s 1fr gets ⅓ and the column that's 2fr gets ⅔ of the remaining space.
Apply a gap. Apply a grid of 2x2 to the first section. Then add a horizontal gap of 40px.
Sett min/max. Select the 1st row and set its size to be min(500px) and max(content). Select the second row and set its size to min(300px) and max(content).
Add and place images. Drag the image and put it in the 1st column of the grid. It will cover both rows. From the Inspector panel, you’ll see it spans a grid area of 1-3 rows. Stretch the image.
Add a second image. Drag the image and put it in the 2nd column of the grid. It will cover both rows, which means its row grid area spans from 1-3. Stretch the image.
Add a container. Drag in a container and place it over the 2nd row and the 2nd column. Its grid area row and column spans over 2-3. Stretch it.
Change the grid at another breakpoint. Click on tablet view. Add another grid row at the top of the grid. Set the row to min(500px) and max(content). Add a vertical gap of 40px.
Move elements around. Unstretch the 1st image, and place it in the 1st row. Set its grid area to be columns 1-3 and rows 1-2. Move the 2nd image to cover the 2 last rows. Its grid area will be columns 1-3 and rows 2-4. Unstretch the 2nd image. Move the container, place it in the last row. Its grid area will be columns 1-3 and rows 3-4.
You can choose from a variety of units of measure to size your columns and rows.
The rest is up to you.