new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

grid

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Carbon CSS Grid is 16 columns

The Carbon layout grid is 16 columns. Column spans are specified using the sm, md, and lg props. For example, <Column sm={2} md={8} lg={8}/> means the column will span 2/4 columns at the small breakpoint, 8/8 columns at the medium breakpoint, and 8/16 columns at the large breakpoint.

Grid wrapper import from @carbon/react

Import Grid and Column components from @carbon/react: import { Grid, Column } from '@carbon/react';

fullWidth prop on Grid for edge-to-edge layouts

Use the fullWidth prop on the Grid component when rows need to expand the whole page without margins. Example: <Grid className="landing-page" fullWidth>

Column offset syntax in Carbon grid

Column offset is specified using the span and offset properties within an object. Example: <Column md={4} lg={{ span: 8, offset: 8 }} sm={4}> creates a column with span 8 and offset 8 at the large breakpoint.

Nested grids require Grid > Column DOM structure

Nested grids are officially supported with Carbon CSS Grid, but they require the expected Grid > Column DOM structure. If you use FlexGrid, subgrid is not supported.

Grid margin adjustments for viewport bleed

To extend grid backgrounds to the viewport edges, use negative margins on grid containers: margin-left: -20px; margin-right: -20px; at large breakpoints, then reset to 0 at medium breakpoints using @include breakpoint-down(md).

CSS Grid component is .cds--css-grid

The CSS Grid layout component uses the .cds--css-grid class. Style it with max-width: 100%; and add padding at medium breakpoints: @include breakpoint(md) { padding-left: 20px; padding-right: 20px; }

Give your agent this brain