Hi there,
I am creating a Services section on my site. I have 5 services, consisting of an image and a heading, which I would like on the same row.
Because the column element adds up to 12, its difficult to make them equal. What would be the best way to do this? Thanks 
Ideally, it would look like this:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
I would do it using flexbox instead of Grid.
Create a div block and size its width according to your liking. Make this div a Flexbox - Horizontal - Expand vertically and equal spaces horizontally
Place, inside that div, another div (let’s call it div 2)
Inside the Div 2, place the image and the heading that represents your service.
Copy that div 2, and paste as many as you need inside the Div 1. Edit the texts and the images according to what you need.
You’ll need to make div 2 a flexbox as well, and make it vertical , and centered.
That’s what I would do in a simple way. Let me know if that works for you
Visual guide (like @Jeandcc said by flexbox its really easy).
I use semantic name flex-col-1-5-desktop (Desktop if this is 5 only on desktop )
https://www.w3schools.com/cssref/css3_pr_flex-basis.asp
Done
Set the width to 19% for example:
More valid approach (like boostrap or webflow columns)
For flex-parent - add negative l/r margins (10px like webflow core columns):
Child: add l/r posetive 10px padding .flex-col-1-5-desktop
The Result (Perfect align cols)
Tablet/mobile. Change the width the basis to 100% (or 50% or 25% and so on).
Docs:
Main pro of distribute technique - Column height is always equal. For me this idea is more usefull.
Equal
VS webflow uneven height cols 
Another approach is to use CSS grid, but For basic cols layout in my opnion its better to use flexbox or weblow-columns. Read this:
You’re both legends, thanks both for your help - I’ve manage to create it
