LESSON 08

Grid.

CSS Grid is a 2-dimensional layout structure that lets you arrange content in columns and rows. You can apply a grid to any section or container, and adjust its structure and dimensions as you need. Designing with CSS Grid gives you precise control over the positioning of elements at every viewport.

CSS Grid Layouts

Resize your browser to see the grid layout in action.

Applying a grid.

Select any section or container and click Apply Grid. You can choose a preset layout or create your own custom grid.

Editing a grid.

Select the container that holds your grid to open the floating action bar, then click Adjust Grid. From here, you can choose a new layout from the preset options. All suggested layouts contain the same number of cells as your original grid, and all your content will be redistributed. Click Edit Grid to manually add, remove, resize and set gaps between rows and columns. By changing the units of measure, you can control how your layout responds to changes in the viewport width.

Exact positioning.

Dock elements to any gridline to control their position and prevent overlap at smaller screen sizes.

Stretching across cells.

Stretch elements, like images and containers, across one or more grid cells to fill an entire area.

Adjusting grid area.

Select an element and open the Inspector panel to manually adjust how the element is positioned within the grid.

TRY IT YOURSELF

Exercise on Grid.

​Open Academy X from desktop to complete this exercise.

01

 Applying a grid. ​Select the white container, click Apply Grid and choose the 2x1 layout.

02

Editing your grid. ​Select the container and click Edit Grid. Click on the left column and set the width to 2fr, then select Done.

03

Adding elements. ​Drag the image to the right grid cell. ​Select the image and click the stretch icon in the top right corner. Now select the stack that contains a headline and a button. Drag it into the left grid cell.

04

Setting docking & margins. Select the stack again, and in the Inspector panel, under Position, set the docking to the left. Set the top margin to be 120px and the left margin to 20%. Now resize the canvas and see how the design responds.

Watch related videos.