Grid layout options

Grid (flex) layout with .row

.col creates columns of equal width, regardless of the number of sibling elements.

with gutters

NB - gutters are created via padding-left and -right which is applied to each .col child of .row. For that reason, .nsw-card has to be nested within .col, to avoid misalignment of its border-top and to avoid a clash with its own padding settings. For more, see .grid below.

.no-gutters

.nsw-card and .col can be combined in one tag, but margin-right class is needed for each child (except the last), to create a gap between them.

differing column widths

to create column widths which are not equal, use a combination of width classes that add up to 12, e.g. .col-5, .col-4 and .col-3. Note that .col can be substituted for the widest column class.

breakpoints for grid layout

to shift a grid layout to a single-column layout at a certain breakpoint, use -lg, -md, -sm in the column class names.

Grid (flex) layout with .nsw-grid

Unlike, .col, .nsw-col by itself does not create columns of equal width. Column widths must be specified with the companion classes .nsw-col--half, .nsw-col--third, .nsw-col--quarter, .nsw-col--two-thirds, .nsw-col--three-quarters.

with .nsw-grid--spaced

this provides margin-bottom for grid elements when the layout collapses to a single column

with .nsw-grid--no-gutters

this removes the negative margin-left and -right on .nsw-grid and crucially the padding-left and -right on .nsw-col which creates the gutters

Grid layout with .grid (css grid)

.grid requires less mark-up than .nsw-grid. How so? Well, .nsw-grid uses flexbox for its column layout, and at the time this module was developed (pre April 25 2021), flexbox had no built-in gutter or column-gap settings. In .nsw-grid, the gutters are created through padding-left and -right which are set to the child column elements. If the visible elements in the grid layout, e.g. cards, have their own padding and border, those padding and border declarations cannot be set directly to the child columns, because they would override or clash with the padding settings which create the gutter. So each card has to be nested within a column element. .grid, on the other hand, uses css grid rather than flexbox for its column layout. And in css grid, gap - the gutters between columns and rows, is a built-in setting. gap is applied to the parent .grid, not to the child elements. Borders and padding can be applied to the child elements themselves, without affecting the gutters. Thus each card can be a child of .grid. And a layer of nesting mark-up can be removed.

with .gtc-3 and .cards

3 columns and repeating rows, with red border-top (default).

with .gtc-4 and .cards.primary

4 columns with blue border-top

new card mark-up (DDS 4)

these should change on hover to white text on a dark blue background

new DDS cards

see more variants at card options