Define how many columns will be inside a Custom Module

[italoborges]

Hello,

I learned how to create custom modules and how to use them. Now I'm facing a problem to customise it more.

I have these variations bellow, with 5 and 4 items, and maybe in a future, 3 items in a row.

I'm trying to think how would be better to develop this, and so far I have this idea:

Create a Main Custom Module

• A text field for the title
• A rich text field for the description 

For the items, I was thinking to create another custom module for it and add it to the Main Custom Module, is this possible?

If yes, where can I manage how many columns each item should have?

Thanks!

[Jsum]

@italoborges,

@ChadP's answer is pretty much what I would go with but I would like to add to it. 

Flexbox isn't natively supported by most browsers so you have to use prefixes on flexbox css attributes.

You definetely want to create the necessary field, I believe an image and text module in your case, and you want to group them and make that group repeatable like @ChadP has suggested.

I wouldn't set a max-width on the flexed items though. At best it will cause the items to align the the left side of the page. If the max-width is 20% then you would need 5 items to fill the page, any less and the missing items space would be empty on the right side. That is provided that width controls work on flexed items and I do not believe that it does.

Here is some blanket prefixes:

parent {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;

    flex-direction: row;
    -webkit-flex-drection: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
}

child {
    flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
}

 as far as adjusting parent width to account for different numbers of children, you can use some forloop magic:

<div class="parent child_{% children.length %}">
    {% for items in children %}
        <div class="child"></div>
    {% endfor %}
</div>

<style>
    .parent {
        width: 100%;
        margin: 0 auto;
    }

    .parent.child_1 {
        width: 20%;
        margin: 0 auto;
    }

    .parent.child_2 {
        width: 40%;
        margin: 0 auto;
    }

    .parent.child_3 {
        width: 60%;
        margin: 0 auto;
    }
</style>

I added a class to the parent element starting with 'child_' and appended the number of items in the item collection "children" to it so the class will change with the number of items, i.e. "child_1", child_2" etc. 

Then you can change the width of the parent based on the number of items and set the parent to left and right margins "auto" to center it. 

You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Need help? Hire Us Here

[italoborges]

Thank you all! It worked like a charm!

I used both answers to build my solution!

[ChadP · Accepted solution]

This is actually really simple in the new Design Manager.

Create a custom Module with 4 fields..

1. A Text Module (This will be the title)
2.  A Rich tect module for the paragraph.
3. Create group that contains: Image Module and Text Module and make that repeatable.

Then you will use flex-box to align the icons in a row. No Mater how many there are.

<div class="wrapper">
    <h2>Title</h2>
    <div class="paragraph">Paragraph text here</div>
   <div class="flex-box-wrapper">

       <div class="flex-item">Image and text in here</div>
       <div class="flex-item">Image and text in here</div>
       <div class="flex-item">Image and text in here</div>
       <div class="flex-item">Image and text in here</div>

    </div>
</div>

<style>
    .flex-box-wrapper {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    .flex-item {
        flex: 1;
        max-width: 20%;
        padding: 1rem;
    }

</style>

After that you need to make the responsive bits so it breaks well on mobile and such.. Perferably mobile first if you can.