Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing grid alignment utilities #2306

Merged
merged 6 commits into from
Sep 4, 2020
Merged

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Sep 3, 2020

This PR introduces utilities for place-items, place-content, place-self, justify-items, and justify-self. Responsive variants are generated for each by default.

I haven't added comprehensive coverage for each property just to keep things simple for now. When someone actually needs one that's missing, we can add it then.

Here's a complete list of what has been added:

Class CSS
content-evenly align-content: space-evenly
justify-items-auto justify-items: auto
justify-items-start justify-items: start
justify-items-end justify-items: end
justify-items-center justify-items: center
justify-items-stretch justify-items: stretch
justify-self-auto justify-self: auto
justify-self-start justify-self: start
justify-self-end justify-self: end
justify-self-center justify-self: center
justify-self-stretch justify-self: stretch
place-content-center place-content: center
place-content-start place-content: start
place-content-end place-content: end
place-content-between place-content: space-between
place-content-around place-content: space-around
place-content-evenly place-content: space-evenly
place-content-stretch place-content: stretch
place-items-auto place-items: auto
place-items-start place-items: start
place-items-end place-items: end
place-items-center place-items: center
place-items-stretch place-items: stretch
place-self-auto place-self: auto
place-self-start place-self: start
place-self-end place-self: end
place-self-center place-self: center
place-self-stretch place-self: stretch

Closes #2241.

@benface
Copy link
Contributor

benface commented Sep 3, 2020

@adamwathan What do you think about adding justify-content-*, align-content-*, and align-items-* utilities that would simply be aliases for justify-*, content-*, and items-*?

@adamwathan
Copy link
Member Author

I've thought about it but don't think it's great to have two ways to do something, and don't want to make the existing ones more verbose either since they are definitely the most commonly used ones. So for now just going to stick with the concise versions for the flexbox ones and verbose ones to disambiguate for the less common ones.

@adamwathan adamwathan merged commit ff013c5 into master Sep 4, 2020
@adamwathan adamwathan deleted the grid-alignment-extensions branch September 4, 2020 14:54
@IRediTOTO
Copy link

hmm why can't i find this in docs?

@adamwathan
Copy link
Member Author

It was released yesterday and I haven’t had time.

https://twitter.com/adamwathan/status/1301978813165903876?s=21

@IRediTOTO
Copy link

It was released yesterday and I haven’t had time.

https://twitter.com/adamwathan/status/1301978813165903876?s=21

why dont you open for people edit homepage tailwind? I can wait :D Thank you for made taildwind, i very love it.

@adamwathan
Copy link
Member Author

You can! Here’s the repo:

https://github.com/tailwindlabs/tailwindcss.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement "justify-items", "justify-self", "align-content" utilities for Grid
4 participants