Responsive Grids with Columns

Here is a column group of 6.  With custom CSS (under Row settings) the width of each is set to 33.33% on desktops and has created a grid of 2 x 3.

Without custom CSS we could have created 2 column groups of 3, but if we change the responsive settings we can end up with empty areas.

For example if we set to 50% we would get 2 on top and one below twice creating two empty spaces.

column-one

?text=1

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-two

?text=2

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-three

?text=3

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-four

?text=4

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-five

?text=5

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-six

?text=6

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

This is using .fl-col to set the widths of all columns in this row including this one.

?text=1
?text=2
?text=3
?text=4
?text=5
?text=6
?text=7
?text=8
?text=9
?text=10

column-one

?text=1

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-two

?text=2

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-three

?text=3

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-four

?text=4

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-five

?text=5

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-six

?text=6

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-seven

?text=7

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-eight

?text=8

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-nine

?text=9

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-ten

?text=10

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-eleven

?text=11

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

column-twelve

?text=12

Column Settings ↣  Advanced Tab ↣ HTML Element ↣ Class contains a selector.

?text=1
?text=2
?text=3
?text=4
?text=5
?text=6