Adding 5 Columns

[designerwriter]

I am setting up my graphics gallery where I initially used Envira Gallery. In edit mode, the gallery showed only 2 columns where the photos were all clumped together in 2 rows. Is it better that I use the columns in Pro to do this gallery? The issue is, I can’t create 5 columns across because that option is not available when I add a section. It only goes up to 4 columns. When I add a column, it just goes to the next row. My photos are 200 pixels wide. Thanks in advance.

https://xpro.eagleheartdynamic.com/index.php/graphic-design/

designerwriter

[prakash_s]

Hi Grace,

Thanks for writing to us.

You can add five cells using the Grid element.
First of all, add a grid element.
Then add 5 cells inside this grid.
Then add this code repeat(5, 1fr) in Columns template.

Hope it helps.
Thanks

[designerwriter]

Ok thanks Prakash! I’d like your opinion. Is it easier to do my gallery this way or by using Envira Gallery. I am just concerned about updates to Envira gallery that might have conflicts etc.

[nabeel]

Hey Grace,

You can add as many columns as you want, all you need to do is to set the right layout of the columns, for example if you want to add 5 columns, you can simply add 5 columns and under Layout, select Custom and enter 20% 20% 20% 20% 20%to have 5 columns layout (see screenshots)

If you want to add only 5 images then this would be the easiest solution however if you have complex galleries to showcase then use Envira Gallery or alternatively you can use Essential Grid or The Grid plugins as well.

They are all supported extensions that comes with the theme so you can safely use them without worrying about the conflicts.

Hope this helps!

[designerwriter]

Thank you Nabeel! I can always count on you. I wasn’t sure how to do it. To save time, I will stick with Envira Gallery especially since Pro supports it and I am not using any added features for this gallery although, I did purchase the upgrade so that I can protect my eagle photos when it comes time to do my photography gallery. This is the only reason why I upgraded.

I have another question. If I am using 20% across 5 columns is that about 200 pixels wide? Is there a way to just state that I want 200 pixels wide then it fills in the gutter width across 5 columns? What does 20% work out to in pixels? I guess it depends on how wide the section is (column + gutters). For example, if I had a 200px ad and I dropped it into one of the 20% columns and the column wasn’t quite 200px, would the ad width be reduced after I added the rest of the 200px ads across the 5 columns? Can I customize the column width in pixels instead of a percentage?

designerwriter

[marc_a]

Hi Grace,

It is not advisable to use fixed pixels in columns because it will break the layout in different type of screen sizes. The purpose of the percentage is to get the exact width no matter what screen sizes you have. For your example, your ad will depend on what is the width of the 20% columns, so that you won’t have any problem with the responsiveness.

Hope that helps.

Thank you.

[designerwriter]

Ah I see. Thank you Marc. That makes sense.

[ruenel]

You are most welcome!