NOTE: THIS ONLY WORKS UNDER FAIRLY PARTICULAR SITUATIONS. REMEMBER:
THE OUTER DISPLAY FLEX CAUSES ALL THE BOXES TO BE THE SAME HEIGHT AS THE TALLEST (FLEX-ITEM) MEMBER. SO, IF THE TALLEST MEMBER GETS TALLER, ALL THE MEMBERS GET TALLER.
THE "FLEX-DIRECTION: COLUMN" PUT ON THE FIRST INNER WRAPPER ALLOWS US TO ACCESS THE HEIGHTS OF EACH INNER ELEMENT. THEN, THE ELEMENT WE WISH TO ALIGN HAS ALL THE EXTRA SPACE OF THE ENTIRE FLEX ITEM DISTRIBUTED ABOVE IT VIA "marginTopAuto". THIS MEANS IF AND ONLY IF THERE IS EXTRA SPACE WITHIN THE ELEMENT, THEN THAT SPACE WILL BE DISTRIBUTED ABOVE THAT ITEM, SO THAT ALL THE "READ MOREs" LINE UP AT THE VERY BOTTOM.
HOWEVER, IF THE HEIGHT OF THE READ MORE WERE TO CHANGE (EITHER NATURALLY OR BY ADDING A UNQIQUE HEIGHT TO IT) IN AN ELEMENT THAT WAS NOT THE TALLEST, THAT ELEMENT WOULD HAVE LESS EXTRA SPACE TO DISTRIBUTE AND SO THE READ MORE WOULD NOT LINE UP.
Also this will only align ONE element in a given container, as ALL of the extra space will always accrue to the only element with the class "marginTopAuto" on it--there is no way I know of to divide any extra space between TWO elements.
NOTE: instructions to do this in Gutenberg follow
Here's a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
FOR GUTENBERG when using COLUMN/COLUMNS for layout use this structure to keep last item evenly spaced from the bottom of all columns:
A Heading
any number of elements
Anything contained within the row element will be in the same place relative to the bottom of the column for all columns, no matter how much content is in the group above
FOR GUTENBERG when using GRID for layout use this structure to keep last item evenly spaced from the bottom of all columns:
A Heading
any number of elements
Anything contained within the row element will be in the same place relative to the bottom of the column for all columns, no matter how much content is in the group above
FOR GUTENBERG WHEN USING THE THE QUERY LOOP AND POST TEMPLATE TO DISPLAY POSTS. This is a bit more complicated as we do not have direct access to each grid child.
NOTE: THE ELEMENT YOU ARE ADDING MARGIN-TOP: AUTO TO MUST MUST MUST BE A DIRECT DIRECT DIRECT CHILD OF THE POST TEMPLATE BLOCK. NO GROUPS ARE ALLOWED!!!!!!!!!! Any styles (often border or padding will have to be put on individual element or you can add style to the li itself via styles.css--se optional styles for list item below)
a) Set up query the way you want WITH A GRID AS ITS LAYOUT AND READ MORE BLOCK (not just the words "read more", but the actual read more block). Then, to make sure the Read More block stays at bottom despite varying heights of content:
b) Add this class (any name you want) to the Post Template Block: "addColumnToEachQueryListItem"
c) Then in your stylesheet add this:
.addColumnToEachQueryListItem > li {
display: flex;
flex-direction: column;
/* optional styles
border: 1px solid gray;
border-radius: 6px;
background: #F4F0E4;
*/
}
.addColumnToEachQueryListItem > li .wp-block-read-more {
margin-top: auto !important;
/* optional styles
width: 100%;
text-align: center;
*/
}
