Using CSS Grid in Percussion Templates

[Joseph_Rioux]

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!

[Nate_Chadwick]

@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?

[Joseph_Rioux]

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!