How can I make the images centered on mobile vertical view with CSS Grid?

Question

I have a grid that displays images and they wrap as the browser window reduces its size:

On large screen it looks fine:

On tablet devices it looks fine as well:

However on mobile, I would like the images column to be centered. The space on the right side looks ugly.

This is the Grid layout I have created:

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.gallery-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

.my-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 10px;
}

figure {
  display: block;
}

img {
  display: block;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learning.css">
  <title>Learning</title>
</head>
<body>
  <section class="gallery">
    <div class="gallery-container">
      <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>
      </div>
    </div>
  </section>
</body>
</html>

Adding margin auto to the img doesn't fix it, on mobile still looks like this:

ATP · Accepted Answer · 2021-05-03T15:38:37.290

Use justify-items: center; on the grid container:

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.gallery-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

.my-gallery {
  display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 10px;
}

figure {
  display: block;
}

img {
  display: block;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learning.css">
  <title>Learning</title>
</head>
<body>
  <section class="gallery">
    <div class="gallery-container">
      <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>
      </div>
    </div>
  </section>
</body>
</html>

score 1 · Answer 2 · answered May 03 '21 at 15:35

Add justify-self: center; to grid items:

figure {
  display: block;
  justify-self: center;
}

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.gallery-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

.my-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 10px;
}

figure {
  display: block;
  justify-self: center;
}

img {
  display: block;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learning.css">
  <title>Learning</title>
</head>

<body>
  <section class="gallery">
    <div class="gallery-container">
      <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://picsum.photos/300" itemprop="contentUrl" data-size="1280x853">
            <img src="https://picsum.photos/300" itemprop="thumbnail" alt="Image description" />
          </a>
        </figure>
      </div>
    </div>
  </section>
</body>

</html>

How can I make the images centered on mobile vertical view with CSS Grid?

2 Answers2