This is for a footer containing three child items. By footer I mean an element of content-determined height with its base being the base of its own container, occupying the entire width of its own container.
The width and height of the child items are dynamically determined and varying.
The height of the footer element should be the height of its largest child item.
The first item should be left justified in the footer. The second item should be centralized within the footer, i.e. its center should be the horizontal midpoint of the container. The third item should be right justified within the footer.
The vertical alignment of the three items should be consistent. It would be good to have a choice of any of all three tops aligned, all three bases aligned and all three (vertical) centers aligned.
My struggle is with achieving the horizontal centralization of the second item. My expectation was that with display: grid on the footer I could achieve this using justify-self:start on the first child, justify-self:center on the second child and justify-self:end on the third child. What happens is that the first element justifies left as I expect, the final element justifies right as I expect, but the center element doesn't centralize in the container, instead it presents with equal space on the left and on the right. This is central if the left and right elements happen to be the same size, but they almost never are.
It seems that justify-self:center doesn't centralize in the container, but in the space between the left and right items.
This use case seems quite commonplace and reasonable to me, so no doubt there is a straightforward way to achieve it, but I don't see a way at least in pure CSS. Can anyone advise please?
