Everyone wants a mobile version of their website. One design for all screen resolutions. For example, on a phone, the user would see content shown in a single column view. A tablet might show the same content in two columns. This is where responsive design comes into play. Responsive design, is an approach to web page creation that makes use of flexible layouts which removes the need to design layouts to suit every device. In this lesson, you will learn how to create a responsive grid system for desktop, tablet, and mobile devices. A web page or app is built of squares and rectangles, which are contained within a grid system or a structure of invisible lines and columns. They organize the content on the page, and create alignment and order. They form the basic structure of the user interface. Let's see how we can design in figma with responsive web design in mind. Let's start by creating responsive grids. To get started, I select the frame icon on the toolbar on top and press f on my keyboard. Which brings up the frames panel. Then I select the desktop frame, 1440 by 1024. On the right side bar, there is a section called layout grid. There was a plus icon on the right. When I click it by default, a simple 10 pixel by 10 pixel grid will appear. If I click on the nine dots below, a pop up will appear which gives options to adjust the size and color of the grid. They are static and pixel fixed. Which means, that if the frame is adjusted the grid stays intact. There was a drop down menu offering three different types of grid. I will start with the column grid. The column grid helps to order content horizontally. When it is selected, the grid inside the frame changes to the default 5 column grid with the gutters the pieces in between. The most common number of columns are 12 on desktop, 8 on a tablet, and 4 on a mobile. The common gutter size is 20 pixels. So, let's change the grid to a 12 column grid. I keep the type to stretch, which means the width of the column will automatically grow or shrink when I resize the frame. To keep the grid responsive, I changed the margin to 70. This is the space between the content and the left and right size of the screen. And I keep the gutter at 20. Now, let me add some order vertically. Here, I bring in the eight point grid, as most of the popular screen sizes are advisable by 8. And it's a base for space and consistency. So, I select the frame and head over to the right sidebar and click the plus in the layout grid section to overlay another layout. In the dialog box, I change the grid layout to a row and change the count or the number of rows to 1000. Then I changed the type top and the height to 8. Finally, I set the gutter to zero. Now we have a vertical and horizontal grid. So, let's add content blocks. You will notice now that everything snaps to the grid. This makes things simpler to arrange and makes all measurements consistent. And everything is divisible by 8. If I want to view the frame without the grid system, I click on the zoom percentage in the top right corner of the screen. This will open the view settings menu. Then I can find an option to turn grids on or off. Alternatively, I can use the keyboard shortcuts to toggle layout grids off. On a Mac, it's control G and Windows it's control shift 4. By using the same command, the grid will be displayed. Constraints are another benefit of using a grid. I select the content boxes in the desktop version and give them constraints. Constraints are used to fix content on a layout to the left, right, top, bottom, and center of a grid. Here I apply left and right constraints. And now, if we altered the frame size, the contents act responsively and change size also. In this video, you covered how to create a responsive grid system and learned how to constrain the elements within the grid.