Equal height rows in CSS Grid Layout

Question

I gather that this is impossible to achieve using Flexbox  as each row can only be the minimal height required to fit its elements  but can this be achieved using the newer CSS Grid   To be clear  I want equal height for all elements in a grid across all rows  not just per each row  Basically  the highest  cell  should dictate the height of all cells  not just the cells in its row

User · Answer

The short answer is that setting grid-auto-rows  1fr  on the grid container solves what was asked   https   codepen io Hlsg pen EXKJba

User · Answer

Short Answer  If the goal is to create a grid with equal height rows  where the tallest cell in the grid sets the height for all rows  here s a quick and simple solution    Set the container to  grid-auto-rows  1fr     How it works  Grid Layout provides a unit for establishing flexible lengths in a grid container  This is the fr unit  It is designed to distribute free space in the container and is somewhat analogous to the flex-grow property in flexbox   If you set all rows in a grid container to 1fr  let s say like this   grid-auto-rows  1fr        then all rows will be equal height   It doesn t really make sense off-the-bat because fr is supposed to distribute free space  And if several rows have content with different heights  then when the space is distributed  some rows would be proportionally smaller and taller   Except  buried deep in the grid spec is this little nugget      7 2 3  Flexible Lengths  the fr   unit               When the available space is infinite  which happens when the grid   container   s width or height is indefinite   flex-sized  fr  grid tracks are   sized to their contents while retaining their respective proportions       The used size of each flex-sized grid track is computed by determining   the max-content size of each flex-sized grid track and dividing that   size by the respective flex factor to determine a    hypothetical 1fr   size          The maximum of those is used as the resolved 1fr length  the   flex fraction   which is then multiplied by each grid track   s flex   factor to determine its final size    So  if I m reading this correctly  when dealing with a dynamically-sized grid  e g   the height is indefinite   grid tracks  rows  in this case  are sized to their contents   The height of each row is determined by the tallest  max-content  grid item   The maximum height of those rows becomes the length of 1fr   That s how 1fr creates equal height rows in a grid container     Why flexbox isn t an option  As noted in the question  equal height rows are not possible with flexbox   Flex items can be equal height on the same row  but not across multiple rows   This behavior is defined in the flexbox spec      6  Flex Lines      In a multi-line flex container  the cross size of each line is the minimum size necessary to contain the flex items on the line    In other words  when there are multiple lines in a row-based flex container  the height of each line  the  cross size   is the minimum height necessary to contain the flex items on the line

[css] Equal height rows in CSS Grid Layout

Examples related to css

Examples related to flexbox

Examples related to grid-layout

Examples related to css-grid