Column for the next row sometimes did not start on the left

[Aybee]

See here https://codepen.io/Aybee/pen/MGZXRz

How should we handle this behavior? If it's not possible I think I have to write my own CSS maybe with flex containers.

[nathansmith]

You'll want to use a clearing <span>, or similar element.

<div class="grid-X">…</div>

<span class="clear"></span>

<div class="grid-X">…</div>

Using the hide-on-X classes, this lets you granularly control where the breaks occur.

More info here…

#41 (comment)

[Aybee]

Ok, so it seems to be the nature of floated elements and we need individual solutions. E.g. this in my case as the markup is generated by a CMS and I don't want to use a new individual template.

.grid-33:nth-child(3n-2) {
  clear: both;
}
@media (min-width:768px) and (max-width:1024px) {
  .grid-33:nth-child(3n-2) {
    clear: none;
  }
  .tablet-grid-50:nth-child(2n-1) {
    clear: both;
  }
}

I think in the near future I will switch to a flex grid which should handle this issue.

[nathansmith]

Yeah, you would run into that problem regardless of the grid system you use.

It's either:

1. Generate some clearing element in HTML, or

2. Calculate a pseudo clearing element in CSS, or

3. Generate markup for each new "row" that wraps floated/flex elements

Even with a flexbox approach, you'll be generating parent elements that have display: flex.

I would encourage you to do that, though. It sounds like you have a specific, custom need. That may be better addressed if you have 100% control over the markup and the accompanying CSS.

[Aybee]

you would run into that problem regardless of the grid system you use.

Not with a flex grid.

I have full control over the markup and CSS. But I'm a web developer and therefore always need easy simple solutions without manipulating the templates for every customer.

One downside of flex is that it needs a flex container with display flex. But there are many wrapper divs within the templates. So I'm able to set the div for the main content do display:flex. Then for normal DIVs I only have to set the flexitems to width:100%. I will try this soon.

[nathansmith]

"You would run into that problem regardless of the grid system you use."
— Me

"One downside of flex is that it needs a flex container with display flex."
— You

^ It seems we're in agreement.

Where "that problem" is the need to programmatically generate markup, to either break the "line" of floats, wrap a "row" parent element around a group of flexbox items, or… like you've done, add some custom CSS rules via nth child logic.

That's all I meant.