Display multiple images in one post content on social media

Question

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?

Answer 1

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.