Archived topic
what tools did GP use to make their columns?
5 replies · Started by Josh on December 6, 2019
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.
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/
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?
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%;
}
}Perfect. This is what I was doing. Just wanted to make sure I wasn't missing anything.
You're welcome
