How to align elements in column?

Design help Animations & Interactions
#1

Hi,
I am putting some captions above my images. I found that when the text lines are longer, the image will be moved down, and that makes the image looks not horizontally aligned (Please check the screenshot I uploaded).
My question is what is the best way of making images align without worrying about the length of text?

I tried to use grid, but I can’t move the elements’ position (I watched tutorial and set the grid cell to be “manual”, but still can’t move the cell…).

Screen Shot 2020-06-25 at 3.32.38 PM
Screen Shot 2020-06-25 at 3.32.38 PM1760×890 363 KB

Here is my public share link: https://preview.webflow.com/preview/yulis-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=yulis-portfolio&preview=d77da9b71ce78c8b9c77ac2db1ed1821&pageId=5ed74a11bc0f1ef1d7a03215&mode=preview

#2

I would wrap the text items in their own div as per image.

image
image1115×244 29.6 KB

Columns to flex vertical & justify = space between
image

#3

Hello.
I tried this with ‘Grid’ and it works.

This is my try out page, look for ‘Card Section’ in the Navigator!
Hopes this helps.

https://preview.webflow.com/preview/huis-trapliften?utm_medium=preview_link&utm_source=designer&utm_content=huis-trapliften&preview=ea357bc9b9a1be94f83c8a75e8889b10&mode=preview

1 Like