Start a new topic

Equalising 3 grids

Hi there,
How do I create 3 equal blocks using 3 grids measuring 5 each? 16 does not divide equally into 3 as we all know.

Within each block I wish to add an advert, a rectagle image. Each are sized 400 pixels x 300 pixels.

If I have 3 x 5 size grids, then I do not get an equal edge to edge on my 1200 pixel site width because the total is 15. If I right and left align the two outer images and centre the middle one, then the white space between them is too wide.

If I select 5 + a 6 + a 5 grids then the middle image (the same size as the other 2) goes larger.

Hope this makes sense.

I have tried manually adjusting the middle (6 grid) block by re-sizing the image within the html block. Trial and error to match to the others either side but this looks messy when we consider responsiveness.

Thank you for your pointer to help me. I've been trying to work this one out for on and off for days :)

Dear Chris,

In this case please try using the 12-grid columns for your layout. In order to test it, we recommend to create a copy of your current layout on the Design > Layouts page and experiment with it. When a copy is created, hover the cursor over the name of the layout, click on Properties in the menu of the gear icon. In the Grid columns list, select 12 and check the result. Please note that this solution may require additional adjustments throughout the layout, that is why we recommend to experiment with a copy.

Alternatively, we recommend to set up equal right and left margins for the middle block so that the space between three blocks is equal. Also, it is better to set it up a per cent margin value so that it looks well on different screen sizes.

I hope that you will find the information useful. If you need any details regarding the solution, please let us know.

Thank you.

Thank you Mariya, I will have some fun playing with the options presented to me, although a 12 grid will make the site too narrow if I understood you correctly.

Heres goes :)

Dear Chris,

Thank you for the reply.

This change should not affect the actual width of the page as it is defined in the Layout width list of the layout settings. The issue here is the number of parts that the page is divided on and their size while the page width is the same. Please have a look at the illustrations provided in the 960 grid system section of the Working with grids using 960 article. Hope this will shed a light on the situation.

If you have any questions left, please let us know.

Thank you.

Ahhh and doh! The penny has dropped re: 12 grid and 3 equal blocks etc. LOL!

We are glad to hear that the solution worked for you. Thank you for keeping us informed.

Login or Signup to post a comment