title: CSS Grid not respecting row and column span rules and placing items in random order
body: <p>I'm trying to develop a photo gallery using <code>CSS Grid</code>. I have <code>landscape</code> photos which end with <code>-l.jpeg</code> and <code>portrait</code> photos which end with <code>-p.jpeg</code>.</p>
  <p><strong>Phtot Gallery <code>HTML</code>:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;article id=&quot;photos&quot;&gt;
      &lt;img src=&quot;./images/1-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/2-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/3-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/4-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/5-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/6-p.jpeg&quot;&gt;
      &lt;img src=&quot;./images/7-p.jpeg&quot;&gt;
      &lt;img src=&quot;./images/8-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/9-p.jpeg&quot;&gt;
      &lt;img src=&quot;./images/10-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/11-p.jpeg&quot;&gt;
      &lt;img src=&quot;./images/12-l.jpeg&quot;&gt;
      &lt;img src=&quot;./images/13-p.jpeg&quot;&gt;
  &lt;/article&gt;
  </code></pre>
  <p><strong>Photo Gallery <code>CSS</code></strong>:</p>
  <pre class="lang-css prettyprint-override"><code>img {
      max-width: 100%;
  } 
  
  #photos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-gap: 0.5em;
      grid-auto-flow: row dense;
  }
  </code></pre>
  <p>This makes the photo gallery look like:</p>
  <p><a href="https://i.stack.imgur.com/9W22t.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9W22t.jpg" alt="Uneven Photo Gallery" /></a></p>
  <p>The photo gallery now has even spaces. To fix that I added the below css,</p>
  <pre class="lang-css prettyprint-override"><code>#photos img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DmrSn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DmrSn.jpg" alt="Zoomed landscape images" /></a></p>
  <p>But now landscape images are zoomed and not able to view the full wide image. So to fix that, I decided to <code>span</code> <code>portrait</code> images <code>vertically</code> by <code>2 rows</code> and <code>landscape</code> images <code>horizontally</code> by <code>2 columns</code> using the below css.</p>
  <pre class="lang-css prettyprint-override"><code>#photos img[src$=&quot;-p.jpeg&quot;] {
      grid-row-end: span-2;
  }
  </code></pre>
  <p>Now grid looks like,</p>
  <p><a href="https://i.stack.imgur.com/IJSrm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IJSrm.jpg" alt="Portrait Fixed" /></a></p>
  <p>Now when I add css for <code>landscape</code> images to span 2 <code>columns</code>,</p>
  <pre class="lang-css prettyprint-override"><code>#photos img[src$=&quot;-l.jpeg&quot;] {
      grid-column-end: span-2;
  }
  </code></pre>
  <p>The grid makes a big uneven space as shown below,</p>
  <p><a href="https://i.stack.imgur.com/lX9f0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lX9f0.jpg" alt="Grid collapsed" /></a></p>
  <p>Another thing I have noticed is that images are not placed in the expected order as per <code>HTML</code>. Here is the repo link - <a href="https://github.com/fingers10/CSSGridPhotoGallery" rel="nofollow noreferrer">CssGridPhotoGallery</a>.</p>
  <p>Please assist on what I'm doing wrong.</p>