How to Make Images in a CSS Grid Lay Next to Each Other and Jump to Another Row When Lacking Space

How to make images in a CSS Grid lay next to each other and jump to another row when lacking space

You see, this is tusk for flex, not for grid. Using grid means columns with same width on each row. No need here at all.

html {
  font-size: 10px;
}
.conteiner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.photo {
  height: 10rem;
  margin: 0 1rem 1rem 0;
}
.photo img {
  width: auto;
  height: 100%;
}

<div class="conteiner">
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/400x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
</div>

Layering images on top of each other causes CSS Grid to not wrap to the next row properly

Absolute positioning takes an element out of the regular flow. Keep the first layer in-flow with position: relative;, and use position: absolute; for the next layer only.

Is this what you are looking for?

.svgGrid {  display: grid;  grid-template-columns: repeat(5, 1fr);  min-width: 0px;  min-height: 0px;  grid-gap: 0px;  font-size: 0px;  background-color: #534e5b;}
.imgContainer {    position: relative;}
.imgContainer .layer0 {  position: relative;  top: 0;  left: 0;  z-index: 0;}
.imgContainer .layer1 {  position: absolute;  top: 0;  left: 0;  z-index: 1;}
img {  height: auto;  width: auto;  max-width: 100%;}

<div class="svgGrid">        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>        <div class="imgContainer">          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">        </div>      </div>

Responsive CSS Grid with persistent aspect ratio

You could take advantage of the fact that padding in percentages is based on width.

This CSS-tricks article explains the idea quite well:

...if you had an element that is 500px wide, and padding-top of 100%,
the padding-top would be 500px.

Isn't that a perfect square, 500px × 500px? Yes, it is! An aspect
ratio!

If we force the height of the element to zero (height: 0;) and don't
have any borders. Then padding will be the only part of the box model
affecting the height, and we'll have our square.

Now imagine instead of 100% top padding, we used 56.25%. That happens
to be a perfect 16:9 ratio! (9 / 16 = 0.5625).

So in order for the columns to maintain aspect ratio:

1. Set the column widths as you suggested:

   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
   

2. Add a pseudo element to the items to maintain the 16:9 aspect ratio:

   .item:before {
     content: "";
     display: block;
     height: 0;
     width: 0;
     padding-bottom: calc(9/16 * 100%);
   }
   

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
}
.item {
  background: grey;
  display: flex;
  justify-content: center;
}
.item:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

CSS two divs next to each other

You can use flexbox to lay out your items:

#parent {  display: flex;}#narrow {  width: 200px;  background: lightblue;  /* Just so it's visible */}#wide {  flex: 1;  /* Grow to rest of container */  background: lightgreen;  /* Just so it's visible */}

<div id="parent">  <div id="wide">Wide (rest of width)</div>  <div id="narrow">Narrow (200px)</div></div>

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

Stacking DIVs on top of each other?

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

.inner {  position: absolute;}

<div class="outer">   <div class="inner">1</div>   <div class="inner">2</div>   <div class="inner">3</div>   <div class="inner">4</div></div>

CSS: How to position two elements on top of each other, without specifying a height?

First of all, you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior; you probably want to add top: 0; left: 0 to the CSS for both of your absolutely positioned elements. You'll also want to have position: relative on .container_row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document's body:

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...

Your problem is that position: absolute removes elements from the normal flow:

It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.

This means that absolutely positioned elements have no effect whatsoever on their parent element's size and your first <div class="container_row"> will have a height of zero.

So you can't do what you're trying to do with absolutely positioned elements unless you know how tall they're going to be (or, equivalently, you can specify their height). If you can specify the heights then you can put the same heights on the .container_row and everything will line up; you could also put a margin-top on the second .container_row to leave room for the absolutely positioned elements. For example:

http://jsfiddle.net/ambiguous/zVBDc/

---

Related Topics