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.
