[Resolved] what tools did GP use to make their columns?

[Josh]

I really like the columns on this page: https://generatepress.com/site-library/
that have a rollover and a bit of movement. Is this part of the GP library or is this custom?

https://generatepress.com/premium/ – I’d be curious about these ones too. I love the movement and simplicity.

[Leo]

Hi there,

That’s using Flexbox to create columns:
https://www.screencast.com/t/WzjM4Rkl

You can see all the code associated with it by using the browser inspector tool.

More on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Josh]

So is it part of generate press or that code actually in the page as in the screenshot? It’s not a builder of some sort. Correct?

[David]

Hi there,

No Pagebuilder just HTML and Flexbox which is a CSS Property that is supported by all modern browsers.
If you’re happy writing some HTML then this will get you started:

<div class="flex-grid">
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-inner">
            <h2>Grid item</h2>
        </div>
    </div>
</div>

And this CSS:

/* Add flex to container */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
}
/* Add gutters */
.flex-item {
    padding: 10px;
    box-sizing: border-box;
}
.flex-inner {
    /* Add styles to grid item container */
}

/*  Mobile width */
.flex-item {
    flex: 1 0 100%;
}
/* Tablet Width */
@media (max-width: 1024px) and (min-width: 768px) {
    .flex-item {
        flex: 1 0 50%;
    }
}
/* Desktop Width */
@media (min-width: 1025px) {
    .flex-item {
        flex: 1 0 33%;
    }
}

[Josh]

Perfect. This is what I was doing. Just wanted to make sure I wasn’t missing anything.

[David]

You’re welcome

[Author]

Posts