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.

TRY IT YOURSELF

Exercise on grid editing.

​Open Academy X from desktop to complete this exercise.

Adding and removing columns & rows.

Add a column 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.

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.

Measurements
for rows.

Min/Max lets you set the minimum and maximum size for a column or row. This is the default for rows. And by default, min is measured in px and the max is measured in content. Since min is px, there is a limit to how small the row can be, so it will never collapse. And since max is content, the row will grow and shrink in response to the content.

Changing a grid
across breakpoints.

Edit your grid at any breakpoint to suit your layout. Add, remove and edit columns and rows, remove the grid completely or set a whole new grid. 

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.

01

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

02

Setting 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

Adding and placing 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

Adding a second image. Drag it 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

Adding a container. Drag it and place it over the 2nd row and the 2nd column. Its grid area row and column spans over 2-3. Stretch it.

06

Changing the design for 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

Moving the 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.