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

by

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:

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:

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>

jsFiddle

More Related Contents:

  1. Image inside div has extra space below the image
  2. When to use IMG vs. CSS background-image?
  3. Last margin / padding collapsing in flexbox / grid layout
  4. What is the effect of encoding an image in base64?
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. CSS Display an Image Resized and Cropped
  7. Equal width flex items even after they wrap
  8. How to center elements on the last row in CSS Grid?
  9. Is there an equivalent to background-size: cover and contain for image elements?
  10. How can I display just a portion of an image in HTML/CSS?
  11. Fullscreen responsive background image in CSS
  12. Floating an image to the bottom right with text wrapping around
  13. Protect image download
  14. Make row stretch across all columns in CSS Grid
  15. How to make in CSS an overlay over an image?
  16. Scale image to fit a bounding box
  17. How does one use the onerror attribute of an img element
  18. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  19. Understanding grid negative values
  20. How can I resize an image to a percentage of itself with CSS?
  21. grid-auto-flow in snake lines?
  22. CSS align images and text on same line
  23. How to auto-resize an image while maintaining aspect ratio
  24. How can I target a specific column or row in a CSS grid layout?
  25. How to make CSS Grid items take up remaining space?
  26. sticky position on css grid items
  27. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  28. What are the default values for justify-content & align content?
  29. Make Bootstrap’s Carousel both center AND responsive?
  30. Use the HTML tag as a background image instead of the CSS background-image property?

Leave a Comment