Force Grid Box to align at top
New to Discord so please forgive me if this post is not as it should be. I'm having an issue with content alignment within a grid box. The first image illustrates my desired result of a page using a grid. The Menu, Heading, and Footer are not part of the grid structure. I have 10+ pages that use this same structure. The attached text file is a mixin I use to include the grid structure.
The four parts of the grid can all be of variable height.
The problem is related to the height of the page_Table area. The area is populated with a dataTable from my database. Because the table length is greater than the height of the image everything looks fine (2nd image, i.e., table aligned to the top of the grid area). But, if one of the alpha letters is selected, which has fewer rows than the base table (3rd image) the table appears in the middle of the grid area.
I can 'force' the table to the top by setting the min-height value for the page_Table area, but this (I would think) would be unnecessary if something else was set properly. My question thus is... what do I need to change in the mixin to ensure that the page_Table area is always aligned to the top, regardless of the content height?
Somehow, the fact that the page_Image area spans 2 rows has some effect on the table. If I move the image down a row with no span, the table aligns to the top at all times. I tried several options for the alignment, but nothing seems to work.
You can see a 'live' illustration of the issue with this 'link' (https: slash slash www dot msholmes dot org/churches).
Once on the page select the letter 'Z' to see the issue.
Any help with this issue is greatly appreciated.
4 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
No, the problem is not solved!! The table appears at the top of the grid box because the page_Table min-height is set larger than the image height. Do an inspect and select the page_Table element. Then unset the min-height parameter. You will see that the table then vertically appears in the middle of the grid box.
the problem is because,
grid-auto-rows: auto
will calculate the size of each grid row based on the total content size. Since your image spans 2 rows, each of the row will get the same height. One way to solve this is to use grid-template-rows: auto auto 1fr
. Or you can also use grid-row: 2 / span 3
on the image wrapper so that the image will always be larger than the column besides itThanks a million... including the grid-template-rows solved the problem.
How do I mark this message as resolved?