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

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

1 голос
/ 30 марта 2019

Вот мои фрагменты кода: 

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
}

.grades_dashboard_box {
  height: 130px;
  width: 160px;
  background-color: #000000;
  color: #ffff;
}
<div class="grades_dashboard_m" id="co_1">
  <div class="three_separation">
    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>
  </div>
</div>

Как видите, div сетки (grades_dashboard_m) не центрируется в grades_dashboard_m.Как центрировать его без центрирования элементов в grades_dashboard_m?Я уже пробовал это: 

.grades_dashboard_m {
  display:flex;
  justify-content:center;
  align-items:center;
}

Но безуспешно.

РЕДАКТИРОВАТЬ : Я понял, что это не проблема.Проблема в том, что содержимое 3-х сеток не центрировано.Но как центрировать содержимое сеток?

Ответы [ 2 ]

1 голос
/ 30 марта 2019

Чистый, CSS Grid Solution

Короче говоря, не используйте margin: 0 auto для центрирования дочерних элементов сетки - используйте justify-items: center. 

.three_separation {
  …
  justify-items: center;
}

Несколько слов о justify-items из MDN :

В макетах сетки он выравнивает элементы внутри их областей сетки на линейная ось

Демо 

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
  justify-items: center;  /* <-- Added */
}

.grades_dashboard_box {
  height: 130px;
  width: 160px;
  background-color: #000000;
  color: #ffff;
}
<div class="grades_dashboard_m" id="co_1">
  <div class="three_separation">
    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>
  </div>
</div>
1 голос
/ 30 марта 2019

Просто примените margin: 0 auto; к .grades_dashboard_box Ликр это 

.grades_dashboard_box {
  margin: 0 auto;
}

это должно центрировать элемент, а не текст.

...