Question 224333 in Html Question posted in
Some basic documentation can be found here.

Html – css grid layout make image fill space of column and row

I have a CSS grid layout that currently looks like this,

.image__gallery-grid {
    max-height: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    display:grid;
}

.image__gallery-grid .image:nth-child(1) {
    grid-column: span 1 / span 1;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(2) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(3) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

.image__gallery-grid .image:nth-child(4) {
    grid-column: span 1 / span 1;
    grid-column-start: 3;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(5) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(6) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

img {
max-width:100%;
height: auto;
}
<div class="image__gallery-grid">
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
 </div>

The first image in the grid should span 2 rows, as should the 4th image. I can get the layout as I want, the first .image and 4th .image both span 2 rows, but the image just matches the width, is there a way to get the image to fill the available space? I’ve tried object-fit:cover; object-position: center

Tags:

2

Answers


  1. 0

    Try adding the following css lines after what you already have:

    .image__gallery-grid .image {
   position: relative; 
   width: 100%; 
   height: 100%;
}

.image__gallery-grid .image img {
    object-fit: cover;
    object-position: center;
    width: 100%; 
    height: 100%; 
    display: block;
}
    Login or Signup to reply.
  2. 0

    to go along with my comment for demonstration

    image is not covering the whole height. give a try to height:100% instead auto and eventually use object-fit
    ex:

    img {
max-width:100%;
height: 100%;
object-fit:cover;
}

    snippet to run:

    .image__gallery-grid {
    max-height: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    display:grid;
}

.image__gallery-grid .image:nth-child(1) {
    grid-column: span 1 / span 1;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(2) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(3) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

.image__gallery-grid .image:nth-child(4) {
    grid-column: span 1 / span 1;
    grid-column-start: 3;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(5) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(6) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

img {
max-width:100%;
height: 100%;
object-fit:cover;
}
    <div class="image__gallery-grid">
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search