Hello, I have a css grid question. How to make sure fixed row spacing?

Author Posts

1101blueli May 19, 2021 at 3:57 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

So I have a grid set in 4Rows.
https://prnt.sc/134if7s

However, without any heading content for the below 2 div. These rows are not in even spacing.
May I know it is possible to make those row even spacing with the microthemer UI? I am not really understand how the css grid works. I cannot figure how to do it…

Here is the page.
https://bit.ly/3wif5jV

Thanks..

Sebastian May 20, 2021 at 9:52 am

Hey,

When you drag the grid area to create rows and columns, the default size of each row is “auto”. This means the natural height of the content sets the size. It’s often useful with content of varying height e.g. text. But if you want to set a uniform height, you could set something like 100px for all of the row fields.

See the Template tab of the grid properties. You may also want to click the chain icon in order to synchronise all four values.

Is that what you were looking for?

Thanks,
Sebastian

P.S. you may find this video on MT’s CSS grid properties useful.

1101blueli May 20, 2021 at 10:02 am

Thank you so much!! My problem is resolved.
And the video is really helpful!!

Sebastian May 20, 2021 at 10:15 am

Awesome!

You may also like this video too:

Creating ‘broken grid’ CSS layouts with Microthemer

🙂

You must login or register to reply to this topic.