Using CSS Grid in Percussion Templates

Hi! I am trying to create a template with a layout based on CSS Grid. In CSS Grid, the grid styling is specified on the parent element, and the direct child elements arrange themselves accordingly. I tried to create this structure using template regions with CSS classes.

My regions:

<region class="max-w-1200 mx-auto grid-12 gap-20" id="parent"> <-- 12 COLUMNS
    	<region class="col-span-6" id="child"> <-- HALF-WIDTH COLUMN

However, when Percussion adds additional divs in the actual HTML render, the direct child region is no longer a direct child of the parent, and so the CSS Grid styling doesn’t work. The “perc-horizontal ui-helper-clearfix” div is the culprit in this case.

<div class="perc-region perc-fixed perc-horizontal ui-helper-clearfix max-w-1200 mx-auto grid-12 gap-20" data-noautoresize="false" id="parent">
	<div class="perc-horizontal ui-helper-clearfix">
		<div class="perc-region perc-region-leaf perc-noAutoResize perc-fixed perc-vertical col-span-6" data-noautoresize="false" id="child">
			<div class="perc-vertical">

Does anyone have any advice? Thank you so much!

@Joseph_Rioux I haven’t tested this but looking at the css, I am wondering if it is these classes:

.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.ui-helper-clearfix { display: inline-block; } 

The :after seems like it might upset the parent/child in your grid. Have you tried overriding those classes with even an empty class,and if that didn’t work, making your overrides important?

Hi, Nate, thanks! I’m not sure of other things that could break the grid, but I do know that the simple presence of the “perc-horizontal ui-helper-clearfix” div is a problem. Because it is inserted between the parent div and the child divs, it breaks up that relationship in the DOM, and CSS Grid is built on that relationship. What I could do is add this styling code:

.grid-12 .ui-helper-clearfix
{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
}

But that is a bit of a hack and kind of redundant, since I already have this grid styling available in a reusable form. I might still just need to do that, but I wanted to see whether anyone had any other ideas. Thanks a lot!