LESSON 17

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.

Canvas with grid over it. There is an image of grey waves on the left side. On the right is a grey triangle beside a green triangle with black spots. The remaining space has a green background

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.

grid on canvas over design. The left side has white text on dark green shaded background. the right side has an image. At the bottom and top of the grid are toolbars for editing

Adding gaps.

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.

Resizing 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.

grid on canvas, background is grey shaded. There is text on the top right and middle of the canvas. At the bottom left and top right there are images. The add gap toolbar is visible too

Measurements
for rows.

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.

light dotted background
grid on canvas showing changing measurements for rows. Right side of grid shows image of woman, and image of mountains below it.

Changing a grid
across breakpoints.

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. 

showing grid on canvas with gap toolbar showing, showing 3 images: black shape on left, smart watch in the middle and mountains on the right. Overlapping with a smaller grid on the bottom right corner, showing grid on different breakpoint

Measurements

for columns.

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.

grid showing row measurements . Column measurements are also visible. Grid contains image of woman in the middle, image of a mountain and grey clouds on right side.

01

Apply a gap. Apply a grid of 2x2 to the first section. Then add a horizontal gap of 40px.

02

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).

03

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.

04

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.

05

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.

06

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.

07

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.

Measurements

in grid.

You can choose from a variety of units of measure to size your columns and rows.

light dotted background
showing design on canvas with grid and column width toolbar visible showing measurements in grid. Top left has text and the remaining grid shows images.  Add gap toolbar also visible
image showing grid on canvas. on bottom left is a grey shaded photo with  text over it. Next to that is an image of a watch. At the bottom left, there is text.   On the top half of the grid, there is grey shading on the left side. On the right side, grey shading

Editor X

The rest is up to you.

Label that shows that this page was created on Editor X