I have been building a features banner in Elements and ran into many issues creating this, mainly around aligning the content when the amount of text varied. I finally devised a solution, as shown in the attached image.
But my question is, have I gone overboard using grid/flex, and is there a simpler solution that accomplishes the same result?
The goal with this banner was that all the items had to be the same height, with the icons and titles lined up and the paragraphs taking up the remaining space regardless of length.
At first, I tried using containers, but that proved unworkable, so I switched to sections, and things fell into place a lot better. I was using a container in the first place because I needed a colored background. But the container did not resize correctly vertically as the content changed.
One of the things that surprised me about the grid component was that it did not provide global options for styling the grid items. This made it a lot harder to do than it should have been. But there is probably a reason I’m unaware of that drove this decision.
I’m sure most of my problems stem from my mishandling of things.
But I would like to know if the approach I settled on makes any sense.
Ok, everyone, you have to understand the basic tenants between grid & flex. Grid allows you to set fixed widths for child items. Flex allows items to grow/shrink in width depending on how much content is in a child item.
So for uniformity, in your example, you probably would want grid.
Just to show you, this is how I would set it up with just grid. Notice that all the heights match by default. There’s different ways to do things, but I think this is the simplest:
I’ll give that a try but from experience with my current approach I know I;m going to run into a problem with not being able to center the SVG. Which was the reason I used the flex item as it gave me that control.
But I’ll try this approach as it is certainly a lot cleaner looking.
Note: a base unit size in tailwind is 4px so 16 x 4px = 64px width
There’s probably a direct way to set width directly in px, but haven’t figured it out yet.
After bon helped me today I tried this tonight to remove some excess components and it’s all working good. Ha! I have so much to learn, it’s taking me away from painting!
I’ve spent a few hours this morning trying to get my head around how to do things with containers, grids and flexes. Following @dan 's lead I decided to try to reproduce a blog page I liked from Passenger.
My first attempt (a couple of hours of experimenting and watching Dan on YT), were missing the containers I needed to have white backgrounds behind the grids. It would be so nice to have background colour properties for grids and flexes.
Once I realised this I ‘started from the background’ and was able to completely rebuild it in about 15 minutes. It’s clear once you start to understand the structure of the documents it will be considerably quicker to get things done.
I think some walk through tutorials will be imperative for beginners as the complexity makes it less than intuitive. Some things are very easy - some are downright confusing.
Additionally, I’m finding the WYSIWYG aspect far less than I imagined - I’m living in the node browser and as copy/paste doesn’t appear to be working for components I’m doing all of my duplicating etc in the node browser. It works really well but if beginners think they’ll be doing everything in WYSIWYG I think they’ll be surprised.
I’m yet to work out how to get the grids to be properly responsive. When I change screen sizes I imagined the grids would ‘stack’ for a smaller screen but they just squash down to unreadable sizes. Can someone point me to where I can adjust this so it responds correctly?
I ran into a similar problem until I figured out that I had to override the Columns setting under Sizing, for the Grid. In my case I wanted three columns at the desktop breakpoint so I set the columns to 9 (out of the 12 column grid). to do this I clicked on the little override indicator at the left edge fo the slider.
I started with the mobile at 1, which gave me the single stacked column.
I got a little lost because I started at Mobile and there was no over-ride option for columns. It was only when I went to the other sizes I saw they were available there. It really is Mobile first
Thanks for the tip, I have it working with a grid on a bare test page. I’ll add some elements and try to get it working with content.
I have a grid with four items (2 column each) and want to centre it in the grid. I can force it to centre by adding an additional grid item in front and behind the other items (and leave them empty) but I’m sure I’m missing something.
Yes! It’s under the “Advanced” settings on each Grid item. You set the start and/or end numbers. These settings allow you to move the Grid Item along the x axis.
You can do the exact same thing for rows (so you can move the grid item along the y axis) by using the Advanced settings in the Row property control group on each Grid Item.
Note: these are advanced settings that essentially expose the raw CSS properties to you, meaning it is possible to “break” the Grid item by combining all these settings incorrectly. We will have more tutorials and documentation on this in the future.
cool, working without a net