如何在CSS上除以两列

问题描述 投票：3回答：3

这是来自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;
}
<!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>

它应该是这样的：enter image description here

javascript html css css3 css-grid
3个回答
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;
}
<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>

Note

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

选项2

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

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


.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;
}
<!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>
0
投票

尝试这样做：

.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;
}

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

.grid-subitem {
   background-color: green;
   flex:1;
   border: 1px solid rgba(0, 0, 0, 0.8);
   height:100%;
   width: 100%;
   justify-content: center;
   align-items: center;
   display: flex;
}

<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item3">
        <div class="grid-subitem">3.1</div>
        <div  class="grid-subitem">3.2</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>

</body>
</html>
0
投票

.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;
}
.div-span{
  width: 20%;
  display:table-cell;
}
.make-border{
  border-right: 1px solid rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>  
    <div class="grid-item">
     <div class="div-span make-border">Umar</div>
     <div class="div-span">Bilal</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>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.