如何在CSS上除以两列

时间：2018-09-12 07:32:32

标签： javascript html css css3 css-grid

这是来自w3学校的代码。那里有9个盒子。但是我只想将第一行的第三列的宽度除以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

3 个答案:

答案 0 :(得分：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>

注意

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

选项2

另一种选择是在.grid-container上定义4列，然后在单元格6和9上使用grid-column-start: span 2;。如果希望等宽列，则将新的网格容器定义为： / p> 

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>

答案 1 :(得分：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>

答案 2 :(得分：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>

相关问题
最新问题