Skip to content

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

5 participants