Hi everyone! I’ve started getting comfortable with the new Tailwind grid builder, but I’m stuck on adjusting row heights. Specifically, I need to shift an item in the first column up to align with the bottom of the first row’s first column. Here’s an example of my current grid setup: Does anyone have tips or insights on the settings to achieve this? Any guidance would be greatly appreciated!
Originally i had it in the same column as the above but since i am working on a different grid layouts for different breakpoints i am thinking I need this item to be its own item so I can place in other locations on the gird on different BP’s.
@StrangeTech @Araminta
If you don’t have any content to place on the second row (in the first and third columns), then I think this may be unnecessarily complicated.
You can simplify the grid into three columns and alight them all to top.
If the “Private Message” button is to sit underneath the circular avatar and the circular avatar has a fixed height, then you can just use a top margin or relative top position for the “Private Message” button to move it down to the correct position.
Hey, thank you for your support! This is my first venture into designing with CSS Grid and breakpoints. Here’s the situation: My objective was to create a layout where I could relocate the ‘Message Me’ button to different areas in various breakpoint layouts. Initially, when placed in the same column as the avatar, the button wasn’t movable. However, I discovered that assigning it to its own column allows for greater flexibility across different breakpoints.
I’m not entirely sure if this method is a common practice, but it’s been effective. By applying some margin to the bottom of the first row and a negative margin to the second div, I’ve managed to achieve the desired result, and it’s functioning well across all breakpoints. Ideally, I was aiming for a more fluid approach, but this method suffices for the time being, but i don’t plan on employing a lot of this type of offset as i know it can cause other issues and complications.
Additionally, I have plans to add more content to the page, necessitating extra rows and columns to ensure sufficient space for rearranging elements at various breakpoints. I’m still learning, so I may be doing it all wrong, ha.
Also, not sure how or where to change the row heights or widths like we did in the cwicly grid builder. And how to use the settings below the rows and heights, Auto flow, Auto Col and Auto Rows? Do you know if there is any documentation in Cwicly or can someone provide me a brief explanation on how to use them? Much appreciated!! See image for more specifics. FYI I understand the columns and rows items and have figured out that i click on each Item to edit it and place it on the grid individually. But I am confused on how to edit the overall grid beyond adding the rows and columns.
So on another note, i am spending the day reviewing all of the TW documentation, and am on this part that I think will be helpful for my above questions. Columns - Tailwind CSS
@Louis @Araminta
So I ended up using a combination of TW and the cwicly grid builder! I think it worked out really well and it was really easy to set up even using lg as my TW Base : )
Hi @ShannaKae, I read in Cwicly FB group you were able to work with Tailwind components accordions and others. Were they free? How did you manage to add them in Cwicly? I reviewed tailwindUI and daisyui but components/templates were not free and the free samples didn’t work for me. Where did you go to find tailwind elements easy to use?
Thank you.
Rodrigo
