You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
height_mobile sets the height of the entire layout on mobile devices
heights_equal determines if every element in the grid will have the same height.
What's odd about height and height_mobile is that they apply to the entire layout_column_wrap() layout, whereas the width argument applies to each item.
(The documentation also uses the word card to refer to items in the layout in both width and height.)
Furthermore, on mobile devices, when heights_equal = "all" (the default), we keep the grid-auto-rows: 1fr property on mobile as well, which can lead to odd spacing between elements because each item is given the same space as the tallest item in the layout.
Some options:
We could unset grid-auto-rows for mobile screen sizes,
We could add an argument heights_equal_mobile = "row",
or we could do a better job of calling out how this argument relates to mobile sized layouts.
layout_column_wrap()
has three arguments for controlling height:height
sets the height of the entire layoutheight_mobile
sets the height of the entire layout on mobile devicesheights_equal
determines if every element in the grid will have the same height.What's odd about
height
andheight_mobile
is that they apply to the entirelayout_column_wrap()
layout, whereas thewidth
argument applies to each item.(The documentation also uses the word card to refer to items in the layout in both
width
andheight
.)Furthermore, on mobile devices, when
heights_equal = "all"
(the default), we keep thegrid-auto-rows: 1fr
property on mobile as well, which can lead to odd spacing between elements because each item is given the same space as the tallest item in the layout.Some options:
grid-auto-rows
for mobile screen sizes,heights_equal_mobile = "row"
,Here's an example app:
With
heights_equal = "row"
, this layout looks like this.The text was updated successfully, but these errors were encountered: