Why are goods crooked?

Question

css

There is a standard oc 2.0 template, but the products in the categories are displayed crookedly, because of what could this be?

Answer 1

Because the product cards are all laid out using float. And, if their height is different, as can be seen in the picture, then they knock out those that lie under them. This is how floats work. Use inline-block, flexbox, or give all blocks the same height. And better limit the height of the title and description of the product using a fixed height + overflow: hidden. And also, to the last paragraph, you can add this property

Answer 2

On SCSS it will be like this:

@mixin justifyBlocks {
    text-align: justify;
    font-size: 0;
    line-height: 0;
    
    &:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
}

And for all descendants of the first level like this:

> div {
  display: inline-block;
  vertical-align: top;
}

I think I have explained the solution clearly. Ask if anything. =)
PS And to align to the left, then text-align: left, : after - delete, and for descendants, the width in%. In the case of justify, you can also set the width of the child block in%.