I'm making a social network website with django, html, css, jquery.
<div class="ui fluid image">
{% if obj.get_images.count > 0 %}
<div class="image-container">
{% for img in obj.get_images.all %}
<div class="">
<img src="{{ img.image.url }}" class="post-image">
</div>
{% endfor %}
</div>
{% endif %}
</div>
I already can upload images to database and display it in my post but I want to organize it a little bit just like this. How can I do that with html and css?
To create an image grid using HTML and CSS, you can utilize the display:flex
property for the main container and display:grid
for arranging the images. Here's an example implementation:
HTML:
<div class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
similique suscipit!
</p>
<div class="grid">
<div class="child1">
<img src="image-url-1.jpg" alt="Image 1" />
</div>
<div class="child2">
<img src="image-url-2.jpg" alt="Image 2" />
</div>
<div class="child3">
<img src="image-url-3.jpg" alt="Image 3" />
</div>
<div class="child4">
<img src="image-url-4.jpg" alt="Image 4" />
</div>
</div>
</div>
CSS (index.css):
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: column;
width: 100%;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
.child1 {
width: 100%;
grid-area: 1 / 1 / 2 / 4;
}
.child2 {
width: 100%;
grid-area: 2 / 1 / 3 / 2;
}
.child3 {
width: 100%;
grid-area: 2 / 2 / 3 / 3;
}
.child4 {
width: 100%;
grid-area: 2 / 3 / 3 / 4;
}
This code creates a responsive image grid with four images arranged in a 3-column layout. The display: flex property is used for the main container, while display: grid is applied to the image grid itself. The CSS styling ensures that the images are properly sized and fitted within their containers.
Feel free to replace the image URLs and alt text with your own content. You can adjust the grid layout by modifying the grid-template-columns property and adjusting the grid areas for each image container.
Remember to adapt the code according to your specific requirements and design preferences.