How to control wrapping position of child divs within parent?

Question

Run my snippet below at full screen and adjust the screen size to see how the images in the last row stack/wrap. They wrap into the next row directly centered underneath. I want them to wrap to the left.

#instafeed{
  text-align: center; 
}

#instafeed a {
  display: inline;
}

<div id="instafeed">
  <a href="https://www.instagram.com/p/BXnys9RjRPz/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20688297_1963514993937753_857460435048202240_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWxTrtyDxRc/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.29.629.629/20213856_1910698219205963_6930800772938465280_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWNScFZjAgh/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c119.0.841.841/19761754_1559014790783970_446056229412798464_n.jpg"></a>
  <a href="https://www.instagram.com/p/BHUleLojUFQ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13556807_1737478323176649_1504794082_n.jpg"></a>
  <a href="https://www.instagram.com/p/BGuK4Fcj8b1/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13391183_147579948992940_1044739645_n.jpg"></a>
  <a href="https://www.instagram.com/p/BFCIh_Oj8YZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13117875_1540501896252889_1217427591_n.jpg"></a>
  <a href="https://www.instagram.com/p/BEfKRBvj8Qd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12960149_1093357414043915_1709258515_n.jpg"></a>
  <a href="https://www.instagram.com/p/BD4AKj0D8Qk/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12912710_1541744086121735_865068036_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDdgvkqj8eB/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12905230_1339824306033837_360303890_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDWgGqED8V_/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/11931255_1744543129098475_1731252403_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDUiP0ZD8eE/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12277558_561257480701059_1294228914_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDRJGqgj8be/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12816783_205447836492901_702305080_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYvhOj8dx/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12822483_1128921290474375_1930798468_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYno8j8dm/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.75.766.766/12797898_1144014128964808_1934723307_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYhs6j8dZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12751172_1698911350393552_1669259430_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYcOpD8dP/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/10631982_1516921725284348_987033499_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2NgfD8fS/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12783854_1718490315031227_197281851_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2GKBD8fF/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12530847_1697788697165860_206292143_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCWZ8Ykj8cH/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.117.937.937/12748280_174729976240065_1868201851_n.jpg"></a>
  <a href="https://www.instagram.com/p/1GTMoAD8bd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e15/11116793_1623276567903955_143681467_n.jpg"></a>
</div>

You **can** but they won't line up...https://codepen.io/Paulie-D/pen/qPxwrx Either you want them centered or you don't...it's pretty much that simple. — Paulie_D, Oct 07 '17 at 17:22
Interesting. I wonder if theres a way to keep the images flush? — Jcode, Oct 07 '17 at 17:28
I want them centred in the div, but I want them to wrap to the left! Theres gotta be a way. — Jcode, Oct 07 '17 at 17:33
Not using the layout method you are using. CSS Grid *can* do that...I think. — Paulie_D, Oct 07 '17 at 17:49

score 1 · Answer 1 · answered Oct 07 '17 at 17:48

At the moment, the only non-"hack" way to do this, AFAIK, is with CSS-Grid

#instafeed {
  background: pink;
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  grid-auto-rows: 160px;
  grid-gap: 4px;
  justify-content: center;
}

<div id="instafeed">
  <a href="https://www.instagram.com/p/BXnys9RjRPz/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20688297_1963514993937753_857460435048202240_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWxTrtyDxRc/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.29.629.629/20213856_1910698219205963_6930800772938465280_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWNScFZjAgh/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c119.0.841.841/19761754_1559014790783970_446056229412798464_n.jpg"></a>
  <a href="https://www.instagram.com/p/BHUleLojUFQ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13556807_1737478323176649_1504794082_n.jpg"></a>
  <a href="https://www.instagram.com/p/BGuK4Fcj8b1/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13391183_147579948992940_1044739645_n.jpg"></a>
  <a href="https://www.instagram.com/p/BFCIh_Oj8YZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13117875_1540501896252889_1217427591_n.jpg"></a>
  <a href="https://www.instagram.com/p/BEfKRBvj8Qd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12960149_1093357414043915_1709258515_n.jpg"></a>
  <a href="https://www.instagram.com/p/BD4AKj0D8Qk/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12912710_1541744086121735_865068036_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDdgvkqj8eB/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12905230_1339824306033837_360303890_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDWgGqED8V_/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/11931255_1744543129098475_1731252403_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDUiP0ZD8eE/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12277558_561257480701059_1294228914_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDRJGqgj8be/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12816783_205447836492901_702305080_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYvhOj8dx/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12822483_1128921290474375_1930798468_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYno8j8dm/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.75.766.766/12797898_1144014128964808_1934723307_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYhs6j8dZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12751172_1698911350393552_1669259430_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYcOpD8dP/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/10631982_1516921725284348_987033499_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2NgfD8fS/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12783854_1718490315031227_197281851_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2GKBD8fF/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12530847_1697788697165860_206292143_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCWZ8Ykj8cH/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.117.937.937/12748280_174729976240065_1868201851_n.jpg"></a>
  <a href="https://www.instagram.com/p/1GTMoAD8bd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e15/11116793_1623276567903955_143681467_n.jpg"></a>
</div>

Cool! Looks like it should, right? For anyone interested, heres the [browser support](http://caniuse.com/#feat=css-grid) — bkis, Oct 07 '17 at 17:55
Seems to ...but at the moment we're obviously working with images all the same size. I'd suggest further testing as this may be fragile when extending. — Paulie_D, Oct 07 '17 at 17:56
True. But there are ways to normalize the size and ratio of images in a case like this. As long as the browsers understand `display: grid;` this is something one can work with. — bkis, Oct 07 '17 at 18:23

score 0 · Answer 2 · answered Oct 07 '17 at 16:56

Now that was easy: What about text-align: left; ?

#instafeed{
  text-align: left; 
}

#instafeed a {
  display: inline;
}

<div id="instafeed">
  <a href="https://www.instagram.com/p/BXnys9RjRPz/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20688297_1963514993937753_857460435048202240_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWxTrtyDxRc/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.29.629.629/20213856_1910698219205963_6930800772938465280_n.jpg"></a>
  <a href="https://www.instagram.com/p/BWNScFZjAgh/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c119.0.841.841/19761754_1559014790783970_446056229412798464_n.jpg"></a>
  <a href="https://www.instagram.com/p/BHUleLojUFQ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13556807_1737478323176649_1504794082_n.jpg"></a>
  <a href="https://www.instagram.com/p/BGuK4Fcj8b1/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13391183_147579948992940_1044739645_n.jpg"></a>
  <a href="https://www.instagram.com/p/BFCIh_Oj8YZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13117875_1540501896252889_1217427591_n.jpg"></a>
  <a href="https://www.instagram.com/p/BEfKRBvj8Qd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12960149_1093357414043915_1709258515_n.jpg"></a>
  <a href="https://www.instagram.com/p/BD4AKj0D8Qk/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12912710_1541744086121735_865068036_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDdgvkqj8eB/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12905230_1339824306033837_360303890_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDWgGqED8V_/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/11931255_1744543129098475_1731252403_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDUiP0ZD8eE/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12277558_561257480701059_1294228914_n.jpg"></a>
  <a href="https://www.instagram.com/p/BDRJGqgj8be/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12816783_205447836492901_702305080_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYvhOj8dx/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12822483_1128921290474375_1930798468_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYno8j8dm/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.75.766.766/12797898_1144014128964808_1934723307_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYhs6j8dZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12751172_1698911350393552_1669259430_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCmYcOpD8dP/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/10631982_1516921725284348_987033499_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2NgfD8fS/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12783854_1718490315031227_197281851_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCl2GKBD8fF/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12530847_1697788697165860_206292143_n.jpg"></a>
  <a href="https://www.instagram.com/p/BCWZ8Ykj8cH/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.117.937.937/12748280_174729976240065_1868201851_n.jpg"></a>
  <a href="https://www.instagram.com/p/1GTMoAD8bd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e15/11116793_1623276567903955_143681467_n.jpg"></a>
</div>

*No*. I tried that. When you align the images to the left, they become off-centered within the parent div. I want the images to be centered within the parent but I want them to wrap to the left. Inspect the parent div to see what I mean. — Jcode, Oct 07 '17 at 16:59
I see. I did a little research as i tried to solve this. Unfortunately, a container doesn't seem to know when it's children wrap. So it can't react to that: https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap Maybe you'll have to use something like [masonry.js](https://masonry.desandro.com/) — bkis, Oct 07 '17 at 17:44

How to control wrapping position of child divs within parent?

2 Answers2