How to Make Images Stay Within the Rows of a CSS Grid Container

How to make images stay within the rows of a css grid container?

You have the images set to height: 100%. But 100% of what? 100% of the container? 100% of the viewport? 100% of the row? If so, what's the height of the row?

Chrome and Firefox make an educated guess about your intentions. They have implemented algorithms designed to go beyond spec guidance in order to improve user experience. They call these modifications "interventions".

Safari doesn't do this. Safari adheres strictly to spec language, which states that a percentage height on an element must have a defined height on the parent, otherwise it is ignored.

These browser differences are explained in more detail here:

CSS Grid Row Height Safari Bug
Chrome / Safari not filling 100% height of flex parent

Then you have to consider that grid items, by default, cannot be smaller than their content. If your rows are set to 1fr, but the images are taller than the space allotted, the rows must expand. You can override this behavior with min-height: 0 / min-width: 0 or overflow with any value other than visible.

This behavior is explained in more detail here:

Prevent grid items from stretching in CSS Grid Layout
Why doesn't flex item shrink past content size?

Still, once you factor in the guidance above, you can probably get your layout to work in Safari with a combination of grid and flex properties:

* {

  box-sizing: border-box;

}

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

  background-color: lightgrey;

}

header,

footer {

  flex: 0 0 100px;

  background-color: tomato;

  display: flex;

  align-items: center;

  justify-content: center;

}

.container {

  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-auto-rows: auto;

  padding: 3px;

}

.tile {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 0;

}

img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  padding: 3px;

}

<header>HEADER</header>

<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->

<div class="container">

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

</div>

<footer>FOOTER</footer>

Controlling the size of an image within a CSS Grid layout

You have two different problems here.

I'll address the first one, which is to contain the image in its container. You almost had it.

Your code:

.photo > img {
  object-fit: cover;
  width: 100%;
}

You just needed to specify a maximum height on the image so it could not overflow the container:

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

JSFiddle demo

The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.

This isn't an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.

This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columns and grid-template-rows?

In addition, why would the bottom row of grid items (tag, album, rotate) follow the image container either up or down? They would have to exit their row.

Scaling the entire grid container wouldn't be a problem. But it seems like you only want to scale one grid item (the image container). It's tricky. You're probably looking at additional containers, auto values for lengths, and possibly scripting.

Here's what happens if you give the image rows an auto value: JSFiddle demo

Fit an image in a fixed height row with css grid

I was finally able to figure it out! Looks like you need to wrap the image in a div AND be sure to specify overflow:hidden. For some reason, that will ensure that the image gets resized down and isn't just scaling up to fit within the parent.

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
}

.container {
  width: 500px;
  height: 300px;
  background-color: green;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}

.image-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: red;
}

img {
  display: flex;
  flex: 0 1 auto;
  object-fit: contain;
  background-color: red;
}

span {
  background-color: blue;
  color: white;
}

<a href='somelink' class="container">
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="Sample Image">
  </div>
  <span>Test</span>
</a>

How to avoid an image overflowing container in CSS Grid?

I found a solution. Delete align-items on css code and the overflow problem disappears. To center the image just use margin: auto.

New code : https://jsfiddle.net/k1fmodv5/

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: auto;
  font-family: 'Libre Baskerville', serif;
}

body {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 10px 10px;
}

header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-row: 1/ 3;
  grid-column: 1/ 13;
  grid-gap: 10px 10px;
  background-color: grey;
}

.type {
  display: grid;
  grid-row: 1/ 2;
  grid-column: 1/ 8;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-self: center;
  background-color: lightcoral;
  min-height: 0;
}

.nav {
  display: grid;
  grid-row: 2/ 3;
  grid-column: 1/ 8;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr;
  align-self: center;
  background-color: crimson;
}

a {
   color: black;
   text-decoration: none;
   padding: 10px;
 }

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

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column: 1/ 13;
  grid-row: 3 / 13;
  grid-gap: 10px 10px;
 }

 .library {
   grid-column: 4/ 10;
   grid-row: 4 / 10;
   margin:auto;
 }

Thank you all for your help !

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>

How do I fit an image inside of this specified grid space?

You could add background-size: 100% 100%; and it will fill it comletely without cropping it. Though it will stretch the image to fit the grid.

See here:

body{
     width: 100vw;
     height: 100vh;
     color: black;
     margin: 0;
     padding: 0;
     font-family: poppins, sans-serif;
     }
.container{
     display: grid;
     grid-template-columns:repeat(5, 1fr);
     grid-template-rows: 0.5fr 3fr 1fr;
     height: 100vh;
     }
.image{
     background-image: url(https://i.imgur.com/c3jpM7D.jpeg);
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
     grid-area: 1/1/3/-1;
     object-fit: fill;
     background-repeat: no-repeat;
 }

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="nav">nav</div>
    <div class="image">image</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>

How to fit a image into css-grid without stretching

Take one class for only image. Give particular height and width to image class and give below css to image.

.class-name img {
  max-height: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

How to Make Images Stay Within the Rows of a CSS Grid Container