v6: Update some flex utility examples with class names#42392
Merged
mdo merged 1 commit intotwbs:v6-devfrom May 4, 2026
Merged
Conversation
Replace generic "Flex item"/"Grid item" placeholders with descriptive words (e.g. "Align", "Items", "Start/End/Center/Stretch") across align-items, justify-items, and place-items docs. Add w-5 utility to flex examples to give consistent item widths so alignment demos render more clearly. Files updated: site/src/content/docs/utilities/align-items.mdx, justify-items.mdx, place-items.mdx.
There was a problem hiding this comment.
Pull request overview
Updates the utility docs examples for alignment-related classes so the live demos use more descriptive item labels, making it easier to see what each example is demonstrating. In align-items, it also adds fixed-width utility classes to the flex items so the examples render more consistently.
Changes:
- Replaced generic “Flex item” / “Grid item” labels with descriptive words in
align-items,justify-items, andplace-itemsexamples. - Added
w-5to the flex items inalign-itemsexamples for more consistent demo widths. - Left the API/reference sections unchanged while refining only the example content.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
site/src/content/docs/utilities/align-items.mdx |
Updates live flex alignment examples with descriptive labels and fixed-width item classes. |
site/src/content/docs/utilities/justify-items.mdx |
Updates grid horizontal-alignment examples to use descriptive item labels. |
site/src/content/docs/utilities/place-items.mdx |
Updates grid two-axis alignment examples to use descriptive item labels. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
coliff
changed the title
mdo
approved these changes
May 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Replace generic "Flex item"/"Grid item" placeholders with descriptive words (e.g. "Align", "Items", "Start/End/Center/Stretch") across align-items, justify-items, and place-items docs.
I added the
w-5utility to flex examples to give consistent item widths (as they were previously) so alignment demos render more clearly.Motivation & Context
This is already done on the Justify Content example and I think slightly helps the user understand which class is being used.
Type of changes
Checklist
npm run lint)Live previews