Streaming live at 10am (PST)

5 columns in the same row

#1

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 :slight_smile:

Ideally, it would look like this:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

0 Likes

#2

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

0 Likes

#3

Visual guide (like @Jeandcc said by flexbox its really easy).

1 - create flex container

2 - put inside this container 5 childs (divs)

I use semantic name flex-col-1-5-desktop (Desktop if this is 5 only on desktop :slight_smile: )

3 - change the basis to 20%

https://www.w3schools.com/cssref/css3_pr_flex-basis.asp

Done :slight_smile:

How to add gutters?

1 - by distribute

Set the width to 19% for example:

2 - by flex classic grid

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
image

The Result (Perfect align cols)

Tablet/mobile. Change the width the basis to 100% (or 50% or 25% and so on).

Docs:

Column height

Main pro of distribute technique - Column height is always equal. For me this idea is more usefull.

Equal :slight_smile:

VS webflow uneven height cols :frowning:


By GRID

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:

1 Like

#4

You’re both legends, thanks both for your help - I’ve manage to create it :slight_smile:

1 Like