I have a grid with three columns, each with a paragraph of text. I want the text to start on the same top line. I have tried adjusting the layout settings but I can’t manage to do it …
I also want these columns the same ratio of length (and space between) but altogether smaller on the page. When I try adjust the width of anything it completely warps the column and the spacing in-between is no longer consistent …
Tips? Thanks!
Right now I want everything to look like the left column, but its as if the text is just being centered to the card & the Layout → In-line option is greyed-out.
The Gap setting in the Style panel’s Layout section allows you to control spacing between grid columns. For maintaining consistent column ratios, the FR (fraction) unit is particularly useful. When you set columns to use FR units (like 1fr, 2fr, etc.), they will automatically distribute available space proportionally while accounting for any gaps you’ve set.
To adjust your grid layout:
Open the Style panel and navigate to the Layout section
Set your desired Gap value for column spacing
Enter Grid Edit mode by clicking the grid icon
Adjust column sizes by either dragging the column headers or entering FR values directly
The FR unit ensures your columns maintain their relative proportions even when the overall container size changes, creating fluid and responsive layouts.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
To align the text at the top in all three columns, set the grid container’s vertical alignment to “Start” and ensure each column has the same height using CSS Grid with align-items: start. If text is centering, check if Flexbox is applied and switch “Align Items” to “Start”. To maintain equal spacing and prevent warping, use percentage-based widths (e.g., 30% for each column) and apply consistent padding/margins. To resize everything proportionally, adjust the grid container’s width rather than individual columns. If Layout → In-line is greyed out, check for conflicting display settings like absolute positioning.
