时间戳

首页 > 解决方案 > 衬里网格集装箱中心

html - 衬里网格集装箱中心

问题描述

.wrapper {
  font-family: sans-serif;
  text-align: center;
  color: white;
  display: grid;
  grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
  grid-template-columns: 8rem 1fr repeat(8, minmax(min-content, 14rem)) 1fr;
}

.item-1{
  background-color: orangered;
}
.item-2{
  background-color: yellowgreen;
}
.item-3{
  background-color: pink;
}
.item-4{
  background-color: violet;
}
.item-5{
  background-color: blue;
}
.item-6{
  background-color: blueviolet;
}
.item-7{
  background-color: red;
}
.item-8{
  background-color: darkred;
}
.item-9{
  background-color: black;
}
<div class="wrapper">
      <div class="item-1">sidebar</div>
      <div class="item-2">2</div>
      <div class="item-3">3</div>
      <div class="item-4">4</div>
      <div class="item-5">5</div>
      <div class="item-6">6</div>
      <div class="item-7">7</div>
      <div class="item-8">8</div>
      <div class="item-9">9</div>
    </div>

您好，我在教程中看到了这种将容器居中的方法，我做了完全相同的事情，但它对我不起作用。我希望项目 2-9 像一个容器（repeat(8, minmax(min-content, 14rem))) 并且两侧的 1fr 应该具有相等的边距，但 item-2 的行为不如预期。

标签： htmlcss

解决方案

您的第 2 列从错误的列 (2) [1fr] 开始，因此您必须告诉它从第 3 列开始。

.wrapper {
  font-family: sans-serif;
  text-align: center;
  color: white;
  display: grid;
  grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
  grid-template-columns: 8rem 1fr repeat(8, minmax(min-content, 14rem)) 1fr;
}

.item-1{
  background-color: orangered;
}
.item-2{
  background-color: yellowgreen;
 grid-column:3;
}
.item-3{
  background-color: pink;
}
.item-4{
  background-color: violet;
}
.item-5{
  background-color: blue;
}
.item-6{
  background-color: blueviolet;
}
.item-7{
  background-color: red;
}
.item-8{
  background-color: darkred;
}
.item-9{
  background-color: black;
}
<div class="wrapper">
      <div class="item-1">sidebar</div>
      <div class="item-2">2</div>
      <div class="item-3">3</div>
      <div class="item-4">4</div>
      <div class="item-5">5</div>
      <div class="item-6">6</div>
      <div class="item-7">7</div>
      <div class="item-8">8</div>
      <div class="item-9">9</div>
    </div>

推荐阅读