#NUMBER GRIDS FULL#

Refer to responsive variants for a full list.

Media queries: Grid breakpoints are based on minimum-width media queries, meaning they apply to that specific width and all greater widths (e.g., tablet:col-4 applies to tablet, desktop, and widescreen devices but not at mobile-lg or any width below the tablet breakpoint).

Gutters: Rows and columns don’t have any gutters by default, but gutters can be added by including grid-gap-sm, grid-gap, or grid-gap-lg at the row level.

Refer to the auto-layout columns section for more examples. For example, four instances of grid-col will display as one-quarter-width columns across all sizes.

Equal-width columns: With flexbox, grid columns without a specified width will display as equal-width columns.

So, if you want three equal-width columns across, use grid-col-4 for each item. Columns: grid-col- indicates the number of columns the item spans out of a possible 12 per row.Rows: Columns must have a grid-row as a parent.Control these values with the values of $theme-site-margins-mobile-width, $theme-site-margins-width and $theme-site-margins-breakpoint in uswds-theme-spacing.scss. By default, grid-containers have padding-x of 2 units, with a padding-x of 4 units at desktop and wider.Set the default max width with $theme-grid-container-max-width in uswds-theme-spacing.scss. grid-container can also accept any breakpoint width, like grid-container-tablet-lg or grid-container-widescreen.If you would like the grid to span the full width of the page, do not use grid-container. Containers: grid-container centers the container and gives it a maximum width of desktop (1024px).The following sections break the layout grid down and describe how it works. Those columns are centered in the page with the parent grid-container container. This example code creates three equal-width columns on tablet, desktop, and widescreen devices by using our predefined grid classes. tablet:grid-col tablet:grid-col tablet:grid-col

Sample contract language for 21st Century IDEA

Number grids