我无法在 CSS 的网格模板区域中将特定行分成 3 个相等的部分

Question

我正在尝试使用 html 和 css 呈现网页设计。除了第4行之外的所有地方都是我想要的，但是在第4行中，我想将3个div分成3等份并覆盖整个宽度。关于如何实现这一点有什么想法吗？

这是我的代码

     <div className="container">
                <div className="box box1">Grid Item 1</div>
                <div className="box box2">Grid Item 2</div>
                <div className="box box3">Grid Item 3</div>
                <div className="box box4">Grid Item 4</div>
                <div className="box box5">Grid Item 5</div>
                <div className="box box6">Grid Item 6</div>
                <div className="box box7">Grid Item 7</div>
                <div className="box box8">Grid Item 8</div>
                <div className="box box9">Grid Item 9</div>
            </div>
.box {
  text-align: center;
  padding: 20px;
  border: 1px solid #000;
}
.box1 {
  background-color: #2ecc71;
}
.box2 {
  background-color: #3298db;
}
.box3 {
  background-color: #9b59b6;
}
.box4 {
  background-color: #e67e22;
}
.box5 {
  background-color: #e74c3c;
}
.box6 {
  background-color: #16a085;
}
.box7 {
  background-color: #2ecc71;
}
.box8 {
  background-color: #3298db;
}
.box9 {
  background-color: #9b59b6;
}

.container {
  padding: 10px;
  display: grid;
  grid-template: 250px 250px 1fr 1fr 250px/ 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas: 
  "A A B C"
  "D D D C"
  "E E E E"
  "F G H ."
  "I I I I";
}
.box1{
  grid-area: A;
}
.box2{
  grid-area: B;
}
.box3{
  grid-area: C;
}
.box4{
  grid-area: D;
}
.box5{
  grid-area: E;
}
.box6{
  grid-area: F;
}
.box7{
  grid-area: G;
}
.box8{
  grid-area: H;
}
.box9{
  grid-area: I;
}

我在这里分享我尝试创建并遇到问题的屏幕截图。

Answer 1

这就是为什么Bootstrap 有 12 列 - 在您的情况下，当有 2、3、4 的因数时，您有时想要对齐东西。

如果您想继续使用 grid-template 个区域，您需要像这样排列：

  "A A A A A A B B B C C C"
  "D D D D D D D D D C C C"
  "E E E E E E E E E E E E"
  "F F F F G G G G H H H H"
  "I I I I I I I I I I I I"

并更改为 12 列：

.box {
  text-align: center;
  padding: 20px;
  border: 1px solid #000;
}

.box1 {
  background-color: #2ecc71;
}

.box2 {
  background-color: #3298db;
}

.box3 {
  background-color: #9b59b6;
}

.box4 {
  background-color: #e67e22;
}

.box5 {
  background-color: #e74c3c;
}

.box6 {
  background-color: #16a085;
}

.box7 {
  background-color: #2ecc71;
}

.box8 {
  background-color: #3298db;
}

.box9 {
  background-color: #9b59b6;
}

.container {
  padding: 10px;
  display: grid;
  grid-template: 250px 250px 1fr 1fr 250px/ repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas: "A A A A A A B B B C C C" "D D D D D D D D D C C C" "E E E E E E E E E E E E" "F F F F G G G G H H H H" "I I I I I I I I I I I I";
}

.box1 {
  grid-area: A;
}

.box2 {
  grid-area: B;
}

.box3 {
  grid-area: C;
}

.box4 {
  grid-area: D;
}

.box5 {
  grid-area: E;
}

.box6 {
  grid-area: F;
}

.box7 {
  grid-area: G;
}

.box8 {
  grid-area: H;
}

.box9 {
  grid-area: I;
}

<div class="container">
  <div class="box box1">Grid Item 1</div>
  <div class="box box2">Grid Item 2</div>
  <div class="box box3">Grid Item 3</div>
  <div class="box box4">Grid Item 4</div>
  <div class="box box5">Grid Item 5</div>
  <div class="box box6">Grid Item 6</div>
  <div class="box box7">Grid Item 7</div>
  <div class="box box8">Grid Item 8</div>
  <div class="box box9">Grid Item 9</div>
</div>

我无法在 CSS 的网格模板区域中将特定行分成 3 个相等的部分

I couldn't split a particular row into 3 equal parts in Grid template area in CSS

html

css

css-grid