如何使用网格布局居中?

时间:2017-12-17 01:24:36

标签: html css css3 centering css-grid

创建(最终)三层树视图结构sports>队>玩家 进度:https://jsfiddle.net/zigzag/kusuz233/1/

body {
  margin: 10px;
}
.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px;
  background-color: #fff;
  color: #444;
  margin-bottom: 20px;
}

.firstLevel > .box{
    background-color: red;
}

.secondLevel > .box{
    background-color: gray;
}

.secondLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  color: #fff;
  padding: 20px;
  font-size: 150%;
}
<div class="firstLevel">
  <div class="box">Sports</div>

</div>
<div class="secondLevel">
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

如何让运动箱以与其他运动箱相同的宽度居中?

此外,我开始做一个网格容器,但后来问题是顶部节点因此分成两个网格容器。也许这可以在一个容器内完成?在我的情况下,这里的文字和描述将是动态的,对象的数量也是如此,只是为了计划......欣赏任何输入。

1 个答案:

答案 0 :(得分:0)

有许多方法可以使网格项目居中。请参阅此处的各种方法:

在这种特殊情况下,一个简单的解决方案是添加伪元素。总体上只需要一个容器。

::before::after伪元素应用于元素时,它们将成为该元素的子元素(read more)。

因此,网格容器上的伪元素成为网格项。

将这些网格项放在第一行的第一列和最后一列中。这将强制“体育”项目居中。

body {
  margin: 10px;
}

.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-auto-rows: 200px;
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.firstLevel::before {
  content: "";
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.firstLevel::after {
  content: "";
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.box {
  background-color: gray;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.red {
  background-color: red;
}
<div class="firstLevel">
  <div class="box red">Sports</div>
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

jsFiddle demo