Responsive grid

Like fluid grids, responsive grids adjust based on the screen size. Columns resize to fill the available space until a breakpoint is reached. A breakpoint is a screen width where the layout shifts to better fit the display. At each breakpoint, the column structure, column widths, gutter widths, and margins can change.

Designing responsive grids requires more planning than fixed or fluid grids. Designers must decide at which screen sizes the grid should change and how it should adapt for the best user experience. When done well, a responsive grid often provides a better experience on small screens than fixed or fluid grids.