search

franken-ui / ui

Franken UI is an HTML-first, open-source library of UI components that works as a standalone or as a Tailwind CSS plugin. It is compatible with UIkit 3. The design is influenced by shadcn/ui.
https://franken-ui.dev
MIT License
1.79k stars 26 forks source link

Grid adds left padding to it's content? #21

Closed envas closed 2 months ago

envas commented 3 months ago

I have a grid with cards as children, see the inspector screenshot. All cards have content left padded with 30px, which comes from uk-grid. I believe the grid system is for object positioning and should not contain any padding/margins etc. Or am I doing something wrong?

Note: enclosing all cards in another <div> will break left padding, but why do that?

CleanShot 2024-08-27 at 18 22 48@2x

sveltecult commented 3 months ago

Hello,

Yes, the Grid component indeed adds padding to your content and this is from UIkit. I'm also unsure why that's the case. Maybe because for convenience, gaps or masonry. Does that affect your design in anyway? If yes, you can always use the built-in grid from Tailwind CSS. After all, Franken UI is just a plugin.

envas commented 2 months ago

Thanks for the clarification. Enclosing the grid cards with additional <div> causes the cards to not have vertically aligned height. I'm a bit confused, it's not suitable for my design and I've gone back to pure Tailwind.