center all grid items in the middle with even spaces-CodePudding

Trying to evenly space out all grid items in the middle of the page:

App Component:

  return (
    <div className="App">
      <div className="App__box">
        <Box />
      </div>
    </div>
  );
}```


App Css:

    .App {
      $large-screen: 1024px;
      $xlarge-screen: 1280px;
    
      text-align: center;
    
      &__box {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 16px 16px;
      }
    
      @media (min-width: $large-screen) {
        &__box {
          grid-template-columns: repeat(2, 2fr);
          justify-items: center;
        }
      }
    }

Ps the desired outcome i am trying to achive for the `$large-screen` breakpoint

CodePudding user response：

fix the with with max-width property then give it margin: 0 auto; width: 100%;

CodePudding user response：

If I have understood the question, it's possible by using justify-self and nth-child. see code:

 .boxes {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
     grid-gap: 16px 16px;
 }
 .box {
     width: 10rem;
     padding: 1rem;
     text-align: center;
     background-color: red;
     justify-self: end;
 }
 .box:nth-child(2) {
       background-color: blue;
       justify-self: start;
}

<div >
     <div >
          <div >1</div>
          <div >2</div>
          <div >3</div>
     </div>
</div>

CodePudding user response：

You could try using a

{
  display: flex;
  flex-wrap: wrap;
}

and try out justify-content prop for parent component, and for child components could use flex-grow prop.

Check out: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox