Put multiple divs on same line using CSS-CodePudding

I'm currently working with Django, and i'm doing a view, where multiple objects from a list are displayed. Right now, each of those objects is on an own line. But i want to have e.g. 2 on one line, so the list is less long on the page.

This is my Code so far:

html:

{% for plant in plants %}
<div >
    <img src="{{plant.icon}}">
    <div>
        <label>{{plant.common_name}}</label>
        <input type="number" name="percentage"/>
    </div>
</div>
{% endfor %}

CSS:

.plant_beet_form {
        width: 100%;
        margin: 0 auto;
        font-size: 3rem;
    }
    
.plant div {
    width: 70%;
    margin: 0 auto;
}

.plant input{
    margin: 0 auto;
    width: 100%;
    font-size: 2.5rem;
}

.plant img {
    width: 10rem;
    height: 10rem;
    margin-bottom: 1rem;
}

.plant {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 2rem;
}

I already tried using display:grid and grid-template-rows: 1fr 1fr, but this didn't work either. Any idea?

Thank you

CodePudding user response：

Make sure you use grid-template-columns : 1fr 1fr in the Parent Div for example if the parent div of your content is .plant_beet_form then do this.

.plant_beet_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

And style your .plant class as you need after that

CodePudding user response：

i think you could try this:

HTML:

<div >
<div >
<img src="{{plant.icon}}">
</div>
<div>
    <label>{{plant.common_name}}</label>
    <input type="number" name="percentage"/>
</div>
</div>

CSS: I added the following:

.container {

display:flex;
flex-direction:row;

}

Hope this this what you are looking for!