Grid

• A page or dashboard layout: a row of stats, a chart beside a table, a sidebar beside a main column.
• A form whose fields sit two or three across on a desktop and stack on a phone.
• Any layout where two sibling regions have to line up on the same columns.

What to use instead

• Flex when it is one row, the widths come from the content, and nothing changes at a breakpoint.
• Space when you want a gap between a few controls, not a layout: buttons in a toolbar, a field and its action.
• Plain CSS grid when 24 columns is not the model you want. Equal cards that reflow on their own are grid-cols-[repeat(auto-fill,minmax(16rem,1fr))], and row spans or named areas need CSS grid too.

• 24 divides by 2, 3, 4, 6, 8 and 12, so halves, thirds and quarters are all whole spans.
• The spans in a Row do not have to add up to 24. Under 24 leaves the rest empty, and over 24 wraps onto a second line.
• wrap={false} keeps every Col on one line. Use it only when you also control the content width, since the content that would have wrapped now overflows.
• A Col with no span and no flex sizes to its content. That suits a trailing action, and rarely a column of text.

• md={6} is shorthand for md={{ span: 6 }}. Use the shorthand while the span is the only thing that changes.
• The object form also takes offset, order, push, pull and flex, so a whole responsive step fits in one prop. Switch to it once a step changes two things.
• A step's flex can be a percent string, for a width that is not a multiple of 1/24.
• Do not repeat a value at every step. Set the phone case once and override it only where the layout changes.

• With a gutter, the Row is wider than its container. It reaches half a gutter past each side, so the outer columns line up with the content around the grid. Do not hide it with overflow-hidden on the parent, which clips shadows.
• gutter={16} spaces the columns only. It defaults to 0, so a Row of cards with no gutter has the cards touching.
• gutter={[16, 24]} is a [horizontal, vertical] pair. The vertical half spaces the rows a Row wraps onto, which a responsive layout does on a phone.
• Responsive gutters need sm. xs only applies below 576px, so { xs: 8, md: 24 } leaves no gap from 576 to 767px. Give every breakpoint you want covered its own key.
• Pick the gutter from the spacing scale (8, 16, 24) and use the same one across a page. Three gutters on one page read as three grids.

• offset adds space before the Col, counted in columns, and leaves less width for its siblings. A centered half-width column is span={12} with offset={6}.
• push and pull move a Col left or right by a number of columns, with position: relative.
• order changes the order the Cols appear in, with flexbox ordering.

• justify takes start, end, center, space-around, space-between and space-evenly. It only moves anything when the spans leave room, so a Row whose spans add up to 24 stays put.
• Row's align has its own values. It takes top, middle, bottom and stretch, where Flex takes CSS values like flex-start. With no align, columns stretch to the tallest one.
• Leave align unset, or set stretch, when a Row of cards should have equal heights. Set top when they should not.

• A fixed sidebar beside a fluid main column is one Col at flex={"200px"} and its sibling at flex={"auto"}.
• A bare number is a ratio (flex={2} beside flex={1} is two thirds and one third), for a split that is not a multiple of 1/24.
• Do not set flex and span on the same Col. Both end up on the element, and which one wins is not something to rely on.

• The steps are xs 480, sm 576, md 768, lg 992, xl 1200, 2xl 1600 and 3xl 1920. Only md matches stock Tailwind, so numbers you remember from another project are wrong here.
• Tailwind names the last two steps 2xl and 3xl, and a Col names them xxl and xxxl.
• Tailwind's xs: starts at 480px. A Col's xs applies at every width, and useBreakpoint().xs is true only below 576px.
• Do not set screen* tokens in a theme. The breakpoints are written into antuikit.css when your tokens are built, while Col and useBreakpoint read the live theme, so a per-theme value would split the two. The token build rejects it.
• useBreakpoint tells JavaScript which breakpoints match, for choices CSS cannot make: how many items to fetch, or whether to render a Drawer instead of a Modal.
• Prefer CSS to useBreakpoint. The hook has no value on the server, so a layout decided with it renders its fallback first and changes after hydration.