How to get Grid items to expand to fill available row space?

[sebm]

I've implemented a small grid layout per https://twilio-labs.github.io/paste/?path=/story/layout-grid--grid-wrapped-2-column-card-layout. The boxes do not fill the available vertical space in the row. I'd be able to implement this straightforwardly with handmade divs, but I'm not sure what the Paste way is for this.

Additionally, is there a faster way of accessing the source code from one of the storybook pages than navigating through the repo?

[richbachman]

Hi @sebm. Thanks for submitting your question. The Paste Grid doesn't have any opinions on the heights of the contents of each grid column. Its best practice to not set absolute heights on elements and let the content of that element dictate the height. How would you handle this using just divs?

As for accessing the source code, there is a Github link on each component doc page, i.e. https://paste.twilio.design/layout/grid.

Screenshot for reference:

[sebm]

How would you handle this using just divs?

I did some inspector CSS-ing to the elements – see the style attributes. The corresponding Paste elements are

				<Grid gutter="space30" vertical={[true, false, false]}>
					<Column span={6}>
						<Card>

[sebm]

@richbachman is it possible to add alignItems, display, flexGrow thru Paste?

[richbachman]

@sebm our Box primitive allows those and other style props. Many of which utilize our token values. You can find more information about Box on the docs page: https://paste.twilio.design/primitives/box

[SiTaggart]

Hmmmmm stretch Columns. I'm kinda into it. We could probably come up with an addition to the Grid API to achieve this, could be super useful

[SiTaggart]

Hi @sebm

A fairly basic but effectively solution for equal height columns based on your solution just landed in Grid. https://paste.twilio.design/layout/grid#equal-column-heights

Let us know what you think.