Line break (clear float) after columns (two questions!)

[Henry]

Thanks for taking a look at this.

Two things pls!

1. I am trying to have two columns and would prefer to use HTML (the inbuilt unsemantic grid) like this:

<div class="grid-container">
  <div class="grid-33 mobile-grid-100">
    I am 33% on desktop and 100% on mobile.
  </div>
  <div class="grid-66 mobile-grid-100">
    I am 66% on desktop and 100% on mobile.
  </div>
</div>

Am I correct that the columns need the “grid-container” because if they do then your documentation needs correcting or better explained here: https://docs.generatepress.com/article/creating-columns/

2. I’m finding that these columns screw up the content below. Is there a clear div or clear float that you’d recommend to use?

I believe to clear floats you just use: <div class="clear"></div>

As suggested here: https://unsemantic.com/css-documentation#8-clearfix

Am I correct with this? Thanks!

* I should add that I have tested it but am unsure about #1 thanks!

[Leo]

Hi there,

1. grid-container isn’t necessary. It just wraps the container width around your content.

Most of the time it the content should already be wrapped inside grid-container class.

2. Yup clear class should work. I should mention that the grid method is a bit old and I wouldn’t recommend it nowadays.

My suggestion is to look into Flexbox method:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or a block plugin that allows you to set uneven columns.

This will absolutely be a feature in our upcoming block plugin 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry]

thanks Leo worked great

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts