Question

对不起，我对网格布局很陌生
我有一个布局，我相信网格系统真的很容易
但我不知道如何为我的布局修改它：

布局分为三种：

如果只有一项：全宽、全高
如果有两个项，左右； 50% 宽度，全高
如果三个项目，正确的代码在下面

.container {
   display: grid;
   width: 200px;
   height: 200px;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 50% 50%;
     grid-gap: 8px;
}

.a {
        grid-column: 1;
        grid-row: 1 / 3;
    background: red;
}
.b {
        grid-column: 2;
        grid-row: 1;
    background: blue;
}
.c {
        grid-column: 2;
        grid-row: 2;
    background: green;
}

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

上面的代码是针对类型 3 的，确实是正确的
我应该如何修改它让它适合类型 1 和 2 ??

Answer 1

你可以像下面这样做：

.container {
  display: inline-grid;
  margin:5px;
  vertical-align:top;
  width: 200px;
  height: 200px;
  grid-gap: 8px;
}

.a { background: red;}
.b { background: blue;}
.c { background: green;}

/* when 2 items we add another column*/
.container :nth-child(2):nth-last-child(1) {
  grid-column:2;
}
/* when 3 items we add another row as well */
.container :nth-child(3):nth-last-child(1) {
  grid-row:2;
  grid-column:2;
}
/* when 3 items, the first one will span 2 rows*/
.container :first-child:nth-last-child(3) {
  grid-row:span 2;
}

<div class="container">
  <div class="a"></div>
</div>

<div class="container">
  <div class="b"></div>
</div>

<div class="container">
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>

<div class="container">
  <div class="b"></div>
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

使网格项自动填充

1 个答案: