Is there a way to auto place div in the right way based on size

Question

I was trying to make an image gallery website, so i'm using Flask as backend to search images in database here is the code.

app.py

from flask import Flask
app = Flask('__name__')
.....
.....

@app.route('/')
def index():
    images = Image_Table.query.all()
    return render_template("index.html", images=images)

index.html

{% 'extends base.html ' %}

{% block content %}
    {% for image in images %}
        
            
        
    {% endfor %}
{% endblock %}

here are the styles style.css

.gallery {
    display: grid;
    grid-templates-column: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
}

.gallery .image {
    width:100%;
}

So the way i want images to be displayed is like that

But instead i got this

In brief i want those empty space to be completed.

G-Cyrillus · Accepted Answer

If you do not mind having image drawn columns by columns, you can use CSS column .

Basicly your CSS can become:

.gallery {
  column-width: 300px;
  column-gap: 10px;
}

.gallery img {
  width: 100%;
  margin-bottom: 10px;
}

You can aside use clamp() if you wish a bit more fluidity in calculating the column's width :

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a , , , , , , or is allowed.

.gallery {
  column-width:300px;/* wherever clamp() is not supported */
  column-width: clamp(150px,30vw,300px);
  column-gap: 10px;
}

.gallery img {
  width: 100%;
  margin-bottom: 10px;
}

Is there a way to auto place div in the right way based on size

Answers (1)

Related Questions