How do I center images in css grid

Question

I'm trying to center images in css grid and also make the image cover the whole container. Here is the html and css code,

.object-wrapper {
  display: grid;
  grid-template-columns: repeat(45, 1fr);
  grid-template-rows: repeat(60, 1fr);
  grid-gap: 0px;
  max-width: 550px;
  max-height: 720px;
  justify-content: center;
}

.object-wrapper div {
  background: transparent;
  padding: 5px;
  max-height: 5px;
  max-width: 5px;
  text-align: center;
  border: 0.001px solid whitesmoke;
  font-size: 5px;
}

img {
  max-height: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
}

<div id="object">
  <div class="object-wrapper">
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div><img src="troll.jpg"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

When it displays the images appear in the middle of the intersections of the grid.

Any help would be appreciated, thanks!

StrayAnt · Accepted Answer · 2020-07-11T01:20:02.070

Take away the max-height/width of your div and set display of your wrapper to display: inline-grid

Link to more on CSS Grid

example with comments below

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .object-wrapper {
            /*display inline-grid*/
            display: inline-grid;
            grid-template-columns: repeat(45, 1fr);
            grid-template-rows: repeat(60, 1fr);
            grid-gap: 0px;
            max-width: 550px;
            max-height: 720px;
        }

        .object-wrapper div {
            background: transparent;
            text-align: center;
            border: 0.001px solid whitesmoke;
            font-size: 5px;
        }

        img {
            max-height: 100%;
            text-align: center;
            display: block;
            object-fit: cover;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>


<div id="object">
    <div class="object-wrapper">
        <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
        <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
        <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
     <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
     <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
     <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
     <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
     <div><img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png"></div>
    </div>
</div>


</body>
</html>

thanks so much, worked for the centering part! I'm wondering do you know how to make the image cover the entire box? — loki, Jul 11 '20 at 01:14

How do I center images in css grid

1 Answers1