How do i center my grid html and css? (Album)

Question

I want to put grid in center, but it is always going to left. My idea is to create music album display photos.

To explain what i want i display an image. The first photos are what are happening, and where it is called "jazz" is my objective.

The code is:

<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  }
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
  margin: auto;
  justify-items: center;
}

</style>
<section class="grid">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
</section>

This don't change or solve anything but grid-gap is deprecated. Start using just "gap" — mikael1000, Jan 26 '21 at 18:50

score 2 · Answer 1 · answered Jan 26 '21 at 18:45

I have indicated in the code where I applied changes.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px); /* Adjusted */
  grid-gap: 20px;
  align-items: center;
  justify-content: center; /* Adjusted */
}

.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  margin: auto;
  justify-items: center;
}

<section class="grid">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
</section>

score 0 · Answer 2 · answered Jan 26 '21 at 18:52

I believe you are centering the span rather than the images themselves. Just move the code to .grid img:

.grid img {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
}

You can also use flexbox instead:

.grid img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

How do i center my grid html and css? (Album)

2 Answers2