Grid

A grid is a group of columns that organize layouts and allow content to scale responsively based on screen size. They provide structure to pages and ensure optimal viewing experiences.

Grids are fundamental to how content is organized across various devices and screen sizes.

The number of columns that a grid contains is determined by the screen size.

Gutters are the spaces in between columns, they also change depending on the screen size. Gutters help separate content into layouts based on the amount of columns being used.

Margins are the spaces between a grid and the edges of the screen or window. They can be the same width or larger than gutters, depending on the screen size.

The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller.

The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns.

Don’t align every component to the grid, doing so might compromise the design of individual elements.

Grids are designed to be responsive, meaning they adapt to different screen sizes and orientations.

The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller.

The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns.

A breakpoint is a predetermined screen size that has specific layout requirements. When breakpoints change, content will shift around to fit the adjusted layout.