Is there a way to put the grid in the center

talopl 0
Viewed 34

I'm creating a fake site for Pentel and I want to insert images of pens using a grid layout. However, the grid shifts to the left and a scroll bar appears in the bottom of the page.

Full Screen:

enter image description here

Small Screen: enter image description here

I want to make it so the scroll bar disappears and the grid is in the center.

HTML:

<div class="pens-images-container">
        <div class="pens-images">
          <img src="./images/black-energel-rtx-refillable-liquid-gel-pen.png" alt="black EnerGel RTX refillable liquid gel pen">
          <img src="./images/blue-ballpoint-07-clear-barrel.png" alt="blue ballpoint 0.7 clear barell pen">
          <img src="./images/EnerGel-X-retractable-gel-pen.png" alt="EnerGel-X retractable gel pen">
          <img src="./images/tradio-fountaion-blue-ink-white-barrel-pen.png" alt="tradio fountain blue ink white barrel pen">
        </div>
</div>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
}

.pens-images-container {
  margin-top: 2rem;
  height: 100vh;
  width: 100vw;
}

.pens-images {
  margin: auto;
  max-width: 70%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2em;
  
}

.pens-images img {
  width: 400px;
  height: 400px;

}
css-grid css html
2 Answers

According to me, there is a problem in you css code. In your given lines of code:

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
}    
.pens-images-container {
      margin-top: 2rem;
      height: 100vh;
      width: 100vw;
    }

Just remove the line width: 100vw; and check. Instead of this you can write width: 100%; It may resolve your problem.

umesh kumar bedi0

The image being on the left is caused by the wrapping div being wider, than the image, so you have to center the image inside the div, too:

The horizontal scrollsbars might be caused by the 100vw, if there is padding or margin applied on the wrapping elements.

https://jsfiddle.net/59df1bgq/31/

I have taken the freedom and replaced all images by placeholders with the dimension of 400*400 pixels.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
}

.pens-images-container {
  margin-top: 2rem;
}

.pens-images {
  display: grid;
  margin: auto;
  max-width: 70%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2em;
}

.pens-images img {
  margin: auto;
}

<div class="pens-images-container">
        <div class="pens-images">
          <img src="https://via.placeholder.com/400" alt="black EnerGel RTX refillable liquid gel pen">
          <img src="https://via.placeholder.com/400" alt="blue ballpoint 0.7 clear barell pen">
          <img src="https://via.placeholder.com/400" alt="EnerGel-X retractable gel pen">
          <img src="https://via.placeholder.com/400" alt="tradio fountain blue ink white barrel pen">
        </div>
</div>
user77f50
Related