OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

CSS Grid matching heights

  • Thread starter Thread starter pab
  • Start date Start date
P

pab

Guest
I am having some issues with CSS grid (i think).

The left-hand side of my grid won't match the height on the other side. There always seems to be a gap at the bottom of the big image.

I need the grid all to be equal heights and 4/3 aspect ratio.

Any ideas? Thanks


Code:
body {
  padding: 40px;
}

* {
  margin: 0px;
  padding: 0px;
}

.grid-gallery {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.grid-gallery-item:first-child {
  grid-row: span 2;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

Code:
<div class="grid-gallery">
  <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
</div>

<p>I am having some issues with CSS grid (i think).</p>
<p>The left-hand side of my grid won't match the height on the other side. There always seems to be a gap at the bottom of the big image.</p>
<p>I need the grid all to be equal heights and 4/3 aspect ratio.</p>
<p>Any ideas? Thanks</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
padding: 40px;
}

* {
margin: 0px;
padding: 0px;
}

.grid-gallery {
list-style: none;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}

.grid-gallery-item:first-child {
grid-row: span 2;
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="grid-gallery">
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>

<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>

<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>

<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>

<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
</div></code></pre>
</div>
</div>
</p>
 

Latest posts

Top