Центрировать элемент сетки на обертке - PullRequest
Новая
       17

Центрировать элемент сетки на обертке

0 голосов
/ 31 марта 2020

Я пытаюсь выяснить, как центрировать 3-й див. Так что на полную ширину у меня есть 3 коробки в сетке. Они 400px в ширину. Когда ширина составляет 1220 пикселей, это превращается в 2 поля подряд. Так что мой 3-й ящик выровнен по левому краю. Как мне отцентрировать его, не разрушая ширину. Потому что я попробовал margin: 0 auto, и он просто стал таким же широким, как материал внутри него.

вот мой код: 

.wraper {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 400px);
}

.box {
  background-color: red;
  height: 200px;
}

@media (max-width: 1220px) {
  .wraper {
    grid-template-columns: repeat(2, 400px);
  }
}

@media (max-width: 810px) {
  .wraper {
    grid-template-columns: repeat(1, 400px);
  }
}

@media (max-width: 400px) {
  .wraper {
    grid-template-columns: repeat(1, 300px);
  }
}
<div class="block bg-success">
  <h1>Projects</h1>
  <div class="wraper">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
</div>

1 Ответ

0 голосов
/ 31 марта 2020

В свой медиа-запрос на 1220 пикселей добавьте правило для центрирования третьего деления. 

@media (max-width: 1220px) {
  .wrapper {
    grid-template-columns: repeat(2, 400px);
  }

   /* NEW */
  .box:last-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: 400px;
  }
}

jsFiddle demo 

.wrapper {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-auto-rows: 200px;  
  grid-gap: 10px;
  grid-template-columns: repeat(3, 400px);
}

@media (max-width: 1220px) {
  .wrapper {
    grid-template-columns: repeat(2, 400px);
  }

   /* NEW */
  .box:last-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: 400px;
  }
}

@media (max-width: 810px) {
  .wrapper {
    grid-template-columns: repeat(1, 400px);
  }

   /* RESET */
  .box:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

@media (max-width: 400px) {
  .wrapper {
    grid-template-columns: repeat(1, 300px);
  }
}

.box {
  background-color: red;
}
<div class="block bg-success">
  <h1>Projects</h1>
  <div class="wrapper">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
</div>
...