- This topic has 13 replies, 3 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
Hi there,
There is a problem with the columns here: https://docs.generatepress.com/article/creating-columns/ when the row above is not filled 100%. I would suggest considering adding the CSS below or something like that.
.first-column{
clear:left;
}.last-column{
clear:right;
}Lead Developer
Our float system is in desperate need of an update. Flexbox is the way to go when it comes to columns.
If you’re using the block editor, definitely check out our plugin: https://generateblocks.com
The grid system is super powerful 🙂
Any update on the CSS rework/update?
Customer Support
Hi,
We recently released an alpha version.
https://generatepress.com/generatepress-3-0-a-new-era/We’ve finally added Flexbox Grid. You can try and see if it fits to your liking.
Let us know if it works for you.
Awesome! I will try to put it on out staging site.
Great.
Hope you enjoy using the new version. 🙂
I do! It looks good 🙂
Are the CSS classes in the doc still the same? https://docs.generatepress.com/article/creating-columns/
That part of the doc has some old info, with some being deprecated(Lightweight Grid Columns).
We highly recommend using Generate Blocks. It’s pretty much Lightweight Grid Columns’ successor.
https://generateblocks.com/GenerateBlocks is new and actively supported/development by Tom.
It has a lot of styling features plus you can add CSS classes if you wish to apply custom CSS to it. GenerateBlocks is 100000x better. You should try it.:)
I use another pagebuilder so I would prefer not using Generate Blocks.
There must be some classes for columns?
Customer Support
Hi there,
are you using a Pagebuilder for the columns ?
No, I am using Elementor for generel page building in WordPress.
But I do have some custom content from code in functions.php which I want to have in columns. I do not want to write extra CSS for that because I thought it was included in the theme if I just use the right CSS classes.
Does that makes sense?
The older ( pre-3.0 ) theme, and the current 3.0 alpha release when set to Floats uses the Unsemantic grid. So you can use the classes provided here:
Personally i feel its easier to write a little of your flexbox CSS to provide that function – as this doesn’t require a whole CSS grid library to be installed.
If you want – we can help with the CSS.
But what about when using Flexbox and not Floats. What is the CSS class’ then?
There are no classes when using Flexbox.
It simple applies the necessary Flex CSS to each of the theme elements.You could create your own with something as simple as this CSS:
@media(min-width: 769px) { .flex-row { display: flex; flex-wrap: wrap; } /* 3 column grid */ .flex-item-33 { margin: 0 10px 10px 0; flex: 1 0 calc(33% - 10px); } /* 4 column grid */ .flex-item-25 { margin: 0 10px 10px 0; flex: 1 0 calc(25% - 10px); } }And your HTML would be like this:
<div class="flex-row"> <div class="flex-item-33"> I am a flex item </div> <div class="flex-item-33"> I am a flex item </div> <div class="flex-item-33"> I am a flex item </div> </div>
- You must be logged in to reply to this topic.
