Responsive Layout Grid

Content is placed in the areas of the screen that contain columns. In responsive layouts, column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes.

A gutter is the space between columns that helps separate content. Gutter widths are fixed values at each breakpoint range.
To better adapt to a given screen size, gutter widths can change at different breakpoints.

Margins are the space between the content and the left and right edges of the screen. Border widths are defined by fixed or scaling values at each breakpoint area. Wider margins are better for larger screens because they create more white space around the edge of the content.