A grid is composed of 3 primary components that include columns, gutters, and margins.
Columns are the imaginary vertical blocks and are used to align the content. We define column widths either in percentage (%) or fixed values.
Gutters are the spaces between the columns. Gutters help to separate the content. We define gutter widths as fixed values.
Margins are the space between content and the edges of the screen.
We define side margin widths as fixed values that decide the minimum breathing space across every screen size.
Flexible margins occupy the remaining space left after composing a grid with columns, gutters, and side margins.
The flexible margins change as per different screen sizes.
The number of columns used to compose a grid is called a column structure.
8, 12, 16, and 20 are a few of the most common column structures for a responsive layout. It depends upon your design requirement that which column structure you choose for your project.
A breakpoint is the specific range of screen sizes where the layout re-adjusts to the available screen size for the best possible layout view.
Column structure, column widths, gutter widths, and margins depend upon breakpoint. Parent containers either stack or scale as per different breakpoints to re-adjust for the best possible view.
A grid can function in three different ways across different breakpoints.
A fixed grid has fixed-width columns and flexible margins. The fixed grid has a fixed content width that doesn’t change in a specific breakpoint range, and the flexible margins occupy the remaining space.