mansory grid items images need to be set without height and width

Question

I am working on mansory grid items I had to achieve the output by using height and width but I want to get images to be set without height and width in a masonry grid layout.

Expected Output without using height and width:

Achieved the result codepen link by using height and width but that it incorrect anyone please suggest me in the right direction how can achieve that layout.

thanks in advance

/***************************************
       mansory layout
****************************************/

.ansa-btn,
.ansa-article-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 30px;
  margin-top: 20px;
}

.ansa-btn a,
.ansa-article-btn a {
  opacity: 0.24;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  line-height: 2.14;
  color: #000000;
  text-decoration: underline;
}

.ansa-article-btn {
  padding: 0 30px 30px 30px;
  margin-top: 0;
}

.ansa-gallery-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ansa-item-img.img-1 {
  height: 391px;
  width: 544px;
}

.ansa-item-img.img-2 {
  margin-left: 25px;
  height: 391px;
  width: 210px;
}

.ansa-item-img.img-3 {
  margin-left: 30px;
  width: 330px;
  height: 200px;
}

.ansa-item-img.img-4 {
  width: 780px;
  height: 290px;
}

.ansa-item-img.img-5 {
  margin-top: -192px;
  margin-left: 30px;
  width: 330px;
  height: 480px;
}

.ansa-mansory-item {
  margin-top: 30px;
}

.ansa-item-img {
  object-fit: cover;
  display: block;
  width: 100%;
}

#ansa-load {
  display: none;
}

.ansa-mansory-item figure {
  margin: 0;
}

<div class="ansa-slider-media">
  <div class="section-inner">
    <div class="masonry-grid">
      <div class="ansa-gallery-items">
        <div class="ansa-mansory-item">
          <a href="assets/images/gallery1.jpg" rel="prettyPhoto"><img class="ansa-item-img img-1" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></a>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-2" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-3" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
      </div>
      <div class="ansa-gallery-items">
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-4" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-5" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
      </div>
    </div>
    <div class="masonry-grid" id="ansa-load">
      <div class="ansa-gallery-items">
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-1" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-2" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-3" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
      </div>
      <div class="ansa-gallery-items">
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-4" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
        <div class="ansa-mansory-item">
          <figure><img class="ansa-item-img img-5" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
        </div>
      </div>
    </div>
  </div>
</div>

you could set height and width to 100% and use object fit (if your grid sizes are set), if your grid sizes aren't set then how do you expect the images to know what size to take? — Pete, Aug 30 '19 at 09:04
@pete: I have used particular height and width using flexbox..can you please help me to solve this problem according to your idea. — Asiya Fatima, Aug 30 '19 at 09:16
Just trying to understand the end goal - are you not wanting set image sizes so you can make this responsive? — Pete, Aug 30 '19 at 09:20
@pete: yeah I want to set images in responsive also. I am stuck to achieve the layout please help me. — Asiya Fatima, Aug 30 '19 at 09:24

Pete · Accepted Answer · 2019-08-30T10:30:55.927

I would go with display grid instead of flex:

html,
body {
  height: 100%;
  margin: 0;
}

.masonry {
  height: 75%;                             /* height can be what you want */
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr 1fr;  /* four column layout */
  grid-template-areas:                     /* set out the images in these areas */
    "a a b d" 
    "a a b d"                              
    "a a b e"
    "c c c e"
    "c c c e";
  grid-gap: 15px;
}

.image-holder {
  position: relative;
}

.image-holder1 {
  grid-area: a;
}

.image-holder2 {
  grid-area: b;
}

.image-holder3 {
  grid-area: c;
}

.image-holder4 {
  grid-area: d;
}

.image-holder5 {
  grid-area: e;
}

.inner {                           /* inner div needed to fill space of  grid area */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image {                             /* make img fill div */
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}

<div class="masonry">
  <div class="image-holder image-holder1">
    <div class="inner">
      <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg">
    </div>
  </div>
  <div class="image-holder image-holder2">
    <div class="inner">
      <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg">
    </div>
  </div>
  <div class="image-holder image-holder3">
    <div class="inner">
      <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg">
    </div>
  </div>
  <div class="image-holder image-holder4">
    <div class="inner">
      <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg">
    </div>
  </div>
  <div class="image-holder image-holder5">
    <div class="inner">
      <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg">
    </div>
  </div>
</div>

If you need to use flex, then it's a bit more html but you can do this:

html,
body {
  height: 100%;
  margin: 0;
}

.masonry {
  height: 75%;
  display: flex;
}

.column1 {
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column2 {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.image-holder {
  margin: 10px;
  position: relative;
}

.image-holder1 {
  width: calc(75% - 20px);
  height: calc(65% - 20px);
}

.image-holder2 {
  width: calc(25% - 20px);
  height: calc(65% - 20px);
}

.image-holder3 {
  width: calc(100% - 20px);
  height: calc(35% - 20px);

}

.image-holder4 {
  height: calc(35% - 20px);
}

.image-holder5 {
  height: calc(65% - 20px);
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}

<div class="masonry">
  <div class="column1">
    <div class="image-holder image-holder1">
      <div class="inner">
        <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb">
      </div>
    </div>
    <div class="image-holder image-holder2">
      <div class="inner">
        <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb">
      </div>
    </div>
    <div class="image-holder image-holder3">
      <div class="inner">
        <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb">
      </div>
    </div>
  </div>
  <div class="column2">
    <div class="image-holder image-holder4">
      <div class="inner">
        <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb">
      </div>
    </div>
    <div class="image-holder image-holder5">
      <div class="inner">
        <img class="image" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb">
      </div>
    </div>
  </div>
</div>

mansory grid items images need to be set without height and width

1 Answers1