Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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

Grid and divide utility not working #13566

Closed
Lueton opened this issue Apr 22, 2024 · 1 comment
Closed

Grid and divide utility not working #13566

Lueton opened this issue Apr 22, 2024 · 1 comment

Comments

@Lueton
Copy link

Lueton commented Apr 22, 2024

There is already an issue (#3579) but since it is closed and there is no activity by devs im going to open a new one.
Basically same issue. The divide-x and divide-y utility is not working when using together with grid.

Behavior can be reproduced here.

<div class="p-6">
  divide-y
  <div class="grid grid-cols-3 divide-y divide-gray-500">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>
<div class="p-6">
  divide-x
  <div class="grid grid-cols-3 divide-x divide-gray-500">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>
<div class="p-6">
  divide-y divide-x
  <div class="grid grid-cols-3 divide-x divide-y divide-gray-500">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

image

What version of Tailwind CSS are you using?

v3.4.1

@wongjn
Copy link
Contributor

wongjn commented Apr 22, 2024

The divide-* utilities don't really work well for two-dimensional layouts like this. You could consider applying borders to one side, and using clip-path to clip out the borders that would appear on the edge: https://play.tailwindcss.com/a4kWHXPx4l

@tailwindlabs tailwindlabs locked and limited conversation to collaborators Apr 22, 2024
@RobinMalfait RobinMalfait converted this issue into discussion #13567 Apr 22, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants