Using CSS Grid Framework in Enfold - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 8, 2018 at 8:08 am #994698
laptophobo
Participant
I’m just starting to learn CSS Grid Framework (not to be confused with Enfold’s “grid” option in layouts). Is that doable?

Using the default text option, I put the following code in, but it crashes the page:

PAGE ELEMENTS
STYLE SHEET
body.page-id-6715 ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
grid-auto-flow: dense;
}

body.page-id-6715 li:nth-child(4) {
grid-row: span 6;
}

Is this because CSS Grids must work on its own, at the top (as the Main elements)?
August 8, 2018 at 10:55 am #994830

Rikard
Keymaster

Hey laptophobo,

I’m not sure if this would be included in theme support to be honest with you. If you need help then we will need to see the actual problem on a live page.

Best regards,
Rikard

August 20, 2018 at 5:57 am #999167

laptophobo
Participant

Rikard. Thanks for the prompt reply. I found the solution.
The problem I was having adding CSS Grids to WordPress was the failure to add the required “<div>” tag.

For those who are also looking into adding CSS Grids to Enfold/Wordpress, you might want to check out this tutorial: https://www.hongkiat.com/blog/css-grid-wordpress/

August 20, 2018 at 8:25 am #999203

Rikard
Keymaster

Hi,

Great, glad you got it working and thanks for sharing the solution. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.