相关疑难解决方法(0)

使网格项跨越到最后一行/列

当我不知道行数时,是否可以使网格项从第一行跨越到最后一行？

可以说我有以下html与未知数量的框.

如何.box从第一个网格线到最后一个网格线进行第三次跨度？

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css css3 css-grid

jbe*_*jbe

2018 01-23

32
推荐指数

3
解决办法

1万
查看次数

grid-column : 1 / -1 是什么意思

我是网格新手。谁能解释一下 1 / -1 是什么意思。

 <style>
  .parrent {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-column-gap: 3.5rem;
     grid-row-gap: var(--space-20);
   }
   .third {
     grid-column: 1/-1;
     justify-content: center;
    }
 </style>
 <div class="parrent"> 
    <div>First </div>
    <div>Second</div>
    <div class="third">Third</div>
 </div>

Run Code Online (Sandbox Code Playgroud)

第三列 grid-column : 1/-1 是什么意思

html javascript css

sat*_*mar

lucky-day

6
推荐指数

0
解决办法

7486
查看次数

如何在 CSS 网格中的行之间设置不同的列宽？

我需要创建如所附图像所示的网格项。第一项需要为 45%，第二项和第三项需要为 52.5%，其余项需要各为 50%。我无法更改 HTML，因为所有网格子项都来自循环。所以我无法通过编写的CSS来实现它，检查代码片段，通过我的CSS，它只能使左侧所有项目的宽度为50％或45％，但是如何将项目的宽度从4更改为其余的项目。

是否可以在不更改 HTML 的情况下实现？

.atul {
  display: grid;
  grid-template-columns: 45% 52.5%;
  grid-template-rows: auto;
  grid-gap: 2.5%;
  grid-template-areas: "card1 card2" 
                       "card1 card3";
}

.card:nth-child(1) {
  grid-area: card1;
}

.card:nth-child(2) {
  grid-area: card2;
}

.card:nth-child(3) {
  grid-area: card3;
}

Run Code Online (Sandbox Code Playgroud)

<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: …

Run Code Online (Sandbox Code Playgroud)

html css grid css-grid

Atu*_*put

2020 04-14

2
推荐指数

1
解决办法

7098
查看次数