Question 314451 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS – How to align multiple images irregular

What would be the best way to to achieve this design with images – each placed inside a to include captions. And yes, it should be responsive… Somehow with grid perhaps?

enter image description here

I tried with float left/right (which I hate though and it gets complicated)

[Some more characters …]
Tags:

2

Answers


  1. 0

    The best option would be using Flexbox, here´s an example of what you are trying to get:

    .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.content {
  margin: 10px;
}

.content img {
  height: 40px;
  border: 1px solid #333;
  display: block;
}
    <div class="container">
  <div class="content">
    <img width="40" />
    <span>Caption</span>
  </div>
  <div class="content">
    <img width="200" />
    <span>Caption</span>
  </div>
  <div class="content">
    <img width="70" />
    <span>Caption</span>
  </div>
  <div class="content">
    <img width="400" />
    <span>Caption</span>
  </div>
  <div class="content">
    <img width="350" />
    <span>Caption</span>
  </div>
  <div class="content">
    <img width="40" />
    <span>Caption</span>
  </div>
</div>

    You can read more about flexbox here: Basic concepts of flexbox – CSS

    Login or Signup to reply.
  2. 0

    Yes, the the ideal method would be using grid. This codepen maybe what you are looking for:

    Irreguler Image Gallery

    However, you can also use flexbox but at the end you have to set width and height for each image and use margins to move them irregularly.

    .gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 12em;
  column-gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search