Question About CSS Grid

[erich199]

I was looking at the support -> page assets (https://pixelexit.com/documentation/page-assets/)

I was wondering if it were possible to make a three column grid with this css or should I use bootstrap css for my pages instead?

 

[Russ]

This code:

<xf:css src="xb_pageassets.less" />
<div class="xb-assets">
<div class="xb-grid xb-gridGutters xb-gridCols3 center">
    <div class="xb-gridCell">
        <div class="xb-grid--content demo-purposes">
            <h4>One third</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.
        </p></div>
    </div>
    <div class="xb-gridCell">
        <div class="xb-grid--content demo-purposes">
            <h4>One third</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.
        </p></div>
    </div>
    <div class="xb-gridCell">
        <div class="xb-grid--content demo-purposes">
            <h4>One third</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.
        </p></div>
    </div>
</div>
</div>

Would technically get you a 3 column div setup on a custom page.

 

[erich199]

Would technically get you a 3 column div setup on a custom page.

Is there a way to control the width of the columns without breaking the responsiveness or are they dynamic based on the content filling them?

 

[Russ]

You can do something like this:

.xb-gridCell:nth-child(2) {
    flex: 1 1 60%;
}

Would target the 2nd column making it 60% width.

 

[erich199]

Thanks for the help Russ. It worked perfectly.