Leadins in Grids
Leadins in a grid behave a little differently than if they are displayed outside that content. First, the leadin elements are stacked in column by default.
The leadins have been placed in padded boxes with a background color just for display purposes here. That is not part of the standard look.
All the grids below are 3-up for tablet and above, 1-up for phones.
Flex-Block-Grid
Flex-block-grids set each item at a fixed width (in this case, 30.5% of the total width) and space them out.
Grid-Block-Grid
Grid-block-grids set each item at an equal width, but the spacing is determine by the gap-Xx class (e.g. gap-4 used here adds 1rem = 16px of space between each item).