A flexbox grid builds a responsive, column-based page layout from three components: a container, rows, and columns. The container centers content, adds horizontal padding, and limits its maximum width; rows wrap horizontal content blocks; columns control content widths. section 9.3.1
Build the layout in this order:
- Set a container to center content with automatic side margins, horizontal padding, and a maximum width such as 1,400 pixels. section 9.3.1
- Make each row a flex container, allow children to wrap, and use negative side margins to account for column gutters. section 9.3.1
- Change column widths at media-query breakpoints so visualizations stack on mobile, share rows on tablet, and occupy planned proportions on desktop. section 9.3.1
Dashboard and visualization layouts
A 12-column dashboard can place a rankings visualization across nine columns beside a three-column region containing a scatterplot and bar chart. On tablet screens, the nested region divides into two six-column visualizations; on mobile, both stack. A related SVG layout gives a timeline two columns and the visualization ten columns above 748 pixels, then removes the timeline and expands the visualization across all 12 columns below that width.
