Grid lay-out

kverweij
34 Posts
kverweij posted this 07 November 2015

Hi,

I am building an template and i get stuck in the moment.

Can you please give me some advice to setup a grid lay-out like this demo site. I have insert an overal image so you can see what i want.

http://www.viak.nl/mijnbad/

In the grid i am using slideshow, modules, images, post, etc

I really like Themler, it give me the freedom to make beautifull themes. Thanks for that!

Hi, I am building an template and i get stuck in the moment. Can you please give me some advice to setup a grid lay-out like this demo site. I have insert an overal image so you can see what i want. http://www.viak.nl/mijnbad/ In the grid i am using slideshow, modules, images, post, etc I really like Themler, it give me the freedom to make beautifull themes. Thanks for that!

Last edited 07 November 2015 by kverweij

Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
Stagger Lee
1818 Posts
Stagger Lee posted this 07 November 2015

Rows inside rows, manipulation of width regions. It is simple mathematics.

You cannot achieve it if you dont add Row control inside Row control (wrapper). For this layout you need at least 7-9 rows controls.

Rows inside rows, manipulation of width regions. It is simple mathematics. You cannot achieve it if you dont add Row control inside Row control (wrapper). For this layout you need at least 7-9 rows controls.
kverweij
34 Posts
kverweij posted this 07 November 2015

i'll give it a shot. Thanks!

i'll give it a shot. Thanks!
Stagger Lee
1818 Posts
Stagger Lee posted this 07 November 2015

Remember, it is not important what you add inside columns, as long it has no margins and paddings.
Separate in your mind those two problems.

And where you have one straight white line beneath blocks (columns) there is your end of one separate Row control.

Remember, it is not important what you add inside columns, as long it has no margins and paddings. Separate in your mind those two problems. And where you have one straight white line beneath blocks (columns) there is your end of one separate Row control.
kverweij
34 Posts
kverweij posted this 07 November 2015

So first i make a section. In that section i make a row and in that row i make another row? Is this the way? What do you mean with 'wrapper' (i only now wrapper to put some external material inside an article).

regards

So first i make a section. In that section i make a row and in that row i make another row? Is this the way? What do you mean with 'wrapper' (i only now wrapper to put some external material inside an article). regards

Last edited 07 November 2015 by kverweij

Stagger Lee
1818 Posts
Stagger Lee posted this 07 November 2015

You dont need sections. But if you want it OK. It is addiotional HTML and CSS code.

Row inside row you need only when height of one column is different than height of neighbouring column. You could do it with other options but better not, to give it chance to behave OK in responsive modes.

"Wrapper" is just one row wher you put second row control.

This in middle two blocks one above each other can you make with simple containers, display:block for them. Problem is height of your content inside columns. They will decide if it looks nice as on this website.

You dont need sections. But if you want it OK. It is addiotional HTML and CSS code. Row inside row you need only when height of one column is different than height of neighbouring column. You could do it with other options but better not, to give it chance to behave OK in responsive modes. "Wrapper" is just one row wher you put second row control. This in middle two blocks one above each other can you make with simple containers, display:block for them. Problem is height of your content inside columns. They will decide if it looks nice as on this website.
Stagger Lee
1818 Posts
Stagger Lee posted this 07 November 2015

Here is a screenshot. There are many ways to get this layout, I tried with most simple as I think it is. Depends much on what is your content for columns, and how do you want it to behave in small devices. It is up to you to fix it.

http://attachments.answers.billiondigital.com/347/7347/themler.png

Here is a screenshot. There are many ways to get this layout, I tried with most simple as I think it is. Depends much on what is your content for columns, and how do you want it to behave in small devices. It is up to you to fix it. ![http://attachments.answers.billiondigital.com/347/7347/themler.png][1] [1]: http://attachments.answers.billiondigital.com/347/7347/themler.png
Stagger Lee
1818 Posts
Stagger Lee posted this 07 November 2015

Dont try to force width in percentage % for columns, just use number of Bootstrap regions for column/s. With percentage you will make a mess of it.

Dont try to force width in percentage % for columns, just use number of Bootstrap regions for column/s. With percentage you will make a mess of it.
kverweij
34 Posts
kverweij posted this 07 November 2015

thanks for your great support!

thanks for your great support!
You must log in or register to leave comments