I am finding it very hard to accomplish certain tasks when working with Grids and Grid Items.
In particular, there is a common situation where you are creating a grid with multiple items. These items have various components including a button you would like to have pinned to the bottom of the grid item regardless of it’s size. I have solved this problem many times in the past with different frameworks, simply by leveraging the “Space Between” option in a CSS grid item.
This option does not appear to be available in the Elements grid item, we have Top, Bottom, and Center, but no way to manipulate the contents with “Space Between”, “Space Evenly”, or “Space Around”. Is there a reason these options are not available in a grid item.
They are available in a Grid for manipulating the grid items themselves, but not the contents of a grid item.
In the past with other frameworks that support CSS grids I would accomplish this task by placing all of the content in a container and then the button outside the container. Then setting the contents to “space between” would use any additional space between the container and the button, thereby forcing the button to be pinned to the bottom of the grid item.
I have spent days trying to figure this out in Elements with no luck. I’m sure I’m missing something, so I would really appreciate some help figuring out how to do this easily.
This has only become an issue because we no longer have access to the CARD component once the v2 components became available. The card component had this support built-in.
I think I have finally found the solution to this problem. It seems a little cumbersome to me but it does work.
My solution was to add another grid within the grid item where I wanted to pin the button to the bottom. I then created two grid items in this grid, placed all fo the elements except the button in the first grid item and the button in the second grid item. Then because I was using a Grid I could choose the “Between” alignment option for the content of the grid. This allowed the button to be “pushed” to the bottom of the grid item.
This would have been even simpler if the Grid Item allowed the “Between” alignment option to be used. But this approach seems to work for now.
Absolutely not. The reason being there are multiple card-like elements that have varying heights to their content given the fact that the various grid items are all the same height. So there is no way of applying a gap that would work across all of the cards and breakpoints.
This is what it looks like. In this image the first “card” is using the approach I discovered using a grid within the card. The middle and end ones are not using anything.
I did experiment with using a Tailwind class to try and add the space between, the class I used was “content-between”. But this did not work as expected, instead of putting the space between the elements it shortened the height of the grid item by the amount of the space.
There is a possible solution using the grid approach. But I’m curious how the Elements team implemented the v1 Card Component as clearly it does the right thing.
I looked at these options but they seem to use specific settings instead of figuring out the space and applying it between the two elements. I tried to use the “content-between” option which sounded like it should do the right thing but it did not. Not sure if that is due to a bug in Elements or if it was not the correct option. All it did was shorten the height of the grid item by the amount of space.
The key is that this space is going to be variable across the various grid items so it has to be calculated on the fly. That is what “space between” normally does in other frameworks I have used.
Here is what I’m after and was able to create using the approach I mentioned with the use of a grid for the content of the “card”. This works now across all of the breakpoints and handles changes in the amount of content within the “card”.
It tooks some figuring out. I’m not convinced it is the most optimal solution. It would be so much better if the “Space Between” option was available for the content of a grid item. This would allow it to be achieved without the use of the embedded grid.
But if the code that is generated is not excessive then my approach works for me. I’ll turn it into a Global and then reuse it everywhere I need a card like this throughout the site.
I’m not 100% following exactly which options you think should be available and where, but there are already a few different ways you can achieve the layout you’re looking for in Elements.
If you could provide a project file with the issue present it’d help me understand what you’re having trouble with
Anyway, attached are a couple of ways you can achieve the layout in your screenshot. Here’s the project file shown in the screenshots: elementsapp://downloadDocument/1EoGvuxeVV1S
This approach seems to work fine as well and means this can be accomplished without the need to use a grid for the content.
I used a grid because it has the option for setting the “space between” two components, which seems to essentially behave the same as the “grow” option you leveraged.
The options I was asking for would be to support the same options like “space between” from the grid, in the grid items themselves. This would allow one to accomplish the same thing as you have done with the grow option in a FLEX item. I most familiar with this option because in the Source framework this is how you would accomplish the ability to pin something to the bottom of a grid item while growing the content area.
I must admit I alway forget that setting a margin to “auto” will push the element in a certain direction.
I think I will switch to you approach as it seems less complicated as there are fewer elements.
Thanks.
BTW, I would like to make a request regarding the CONTAINER. It would be really nice if the title for a container would switch to “Grid Item” or “Flex Item” if those choices are selected. This makes it a lot easier to identify how a container is setup in the Node Browser.
After playing with this for awhile I’ve discovered that I don’t even need to bother with adding the flex item. All that was needed was to set the button to have the top margin set to AUTO. This then pins the button to the bottom of the grid item, which is all I needed.
The fact that the grid items are set to have their heights in sync automatically handled the growing of the content area. As long as the content was set to be aligned to the TOP of the grid item.
We’ll take another look at the controls and see if this option makes sense for our built in components
Using fewer components where possible is always a good idea
This is naturally how grid works in CSS - by default all items are the same “height”. You can adjust this with various settings, but it’s how it was designed to work “out of the box”.
With the use of AUTO to pin the button to the bottom of the grid item it made the setup extremely simple, and without the need for a bunch of extra components. Nice!
Having the ability to position elements with AUTO to some degree negates the need for something like “Space Between” as it is doing the same thing. Except it is better because it does not require placing the content that you want to apply the “space between” in a container, making the generated code simpler.
Somehow this use of AUTO needs to be more prominently explained in the docs as it is so powerful. I completely missed that this could be done with AUTO. I used it for centering but not pinning.
Here is a screenshot of the settings I used to achieve the full width buttons. I don’t know if this is the correct approach or not but it works for me. I’m using it in a lot of different places.
NOTE: for it to work the grid item that is housing the button is set to have no padding. The sizing of the grid item content is set to FULL for both horizontal and vertical. If the vertical is set to AUTO the button will not be pinned to the bottom.
