如何在CSS上除以两列

Question

如何在CSS上除以两列

A.F*_*reb 3 html javascript css css3 css-grid

这是来自w3学校的代码.那里有9个盒子.但我想把第1行第3列的宽度除以2.我怎么能这样做？这是下面的代码

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>  
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>  
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>  
  </div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

它应该是这样的:

Answer 1

con*_*exo 10

选项1

您需要将新容器包装在新的容器中div并创建子网格:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Run Code Online (Sandbox Code Playgroud)

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="subgrid">
    <div class="grid-item">3</div>
    <div class="grid-item">3.1</div>
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Run Code Online (Sandbox Code Playgroud)

注意

请注意,由于padding: 20px;这些子网格列不适合默认StackOverflow片段视图中可用的宽度,这就是调整宽度的原因,因此前两个常规列现在不如包含子网格的第三列宽.即使它们足够宽,浏览器也会决定渲染每列的宽度,就像在 table元素中一样.

选项2

另一个选项是在其上定义4列.grid-container然后grid-column-start: span 2;在单元格6和9上使用.如果您想要相等宽度的列,则将新的网格容器定义为:

grid-template-columns: 2fr 2fr 1fr 1fr;

Run Code Online (Sandbox Code Playgroud)

.grid-container {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.colspan-2 {
  grid-column-start: span 2;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">3.1</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item colspan-2">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item colspan-2">9</div>
  </div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	111 次
最近记录：	7 年，1 月前