center all grid items in the middle with even spaces

user_5127919 0
Viewed 34

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

enter image description here

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
reactjs css
3 Answers

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

user_179173980

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 class="App">
     <div class="boxes">
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3</div>
     </div>
</div>

user_135415850
user_92475550
Related