删除CSS网格中的空白空间 [英] Remove empty space in CSS Grid

问题描述

我有以下布局：

.grid {display：grid ; grid-template-columns：645px 316px; grid-gap：20px;}。top {grid-column：1/2;网格行：1; background-color：green;}。right {grid-column：2; grid-row：1 / span 2; background-color：blue;}。bottom {grid-column：1;网格行：2; < div class = 网格 > < div class =top> top< / div> < div class =right> a< br> a< br> a< br> a< br> a< br> a< br> a< br> a< br> a< br> a< br> < / DIV> < div class =bottom>底部< / div>< / div>

我使用网格完全相同，但绿顶部分占用的空间量仅为一行。即底部的红色部分应该向右推动到顶部一词的下面，以便顶部绿色部分中的额外空白空间被移除

解决方案

用25个小行创建一个网格。像这样：

  grid-template-rows：repeat（25，10px）; 
  

使顶部（绿色）项目四行。

  .top {
 grid-row：1/4; 
 
 
 
 
 
 
使底部（红色）项目跨越其余行。
  .bottom {
 grid-row：6 / -1; 
 
 
 
 
 
 
 （从第6行开始，为20px行距留出空间）
 
 
 
使正确（蓝色）项目跨越所有行。
  .right {
 grid-row：1 / -1; 
} 
  
  修改过的codepen    
 $ b 
 
 
 
  .grid {display：grid; grid-template-columns：645px 316px; grid-template-rows：repeat（25，10px）; grid-column-gap：20px;} top {grid-column：1/2;网格行：1/4; background-color：green;}。right {grid-column：2;网格行：1 / -1; background-color：blue;}。bottom {grid-column：1;网格行：6 / -1;  < div class = 网格 > < div class =top> top< / div> < div class =right>一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br />一个< br /> < / DIV> < div class =bottom> bottom< / div>< / div>  
 
I have the following layout:



.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 2;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>





How could i do the exact same using a grid but the amount of space that the green top section takes up is just one line. i.e. the bottom red section should push right up to below the word "top" so that the extra empty space in the top green section is removed
解决方案
Create a grid with, let's say, 25 small rows. Something like this:
grid-template-rows: repeat(25, 10px);
Make the "top" (green) item span four rows.
.top {
    grid-row: 1 / 4;
}
Make the "bottom" (red) item span the remaining rows.
.bottom {
    grid-row: 6 / -1;
}
(Starting at row 6 to make space for the 20px row gap you had originally.)

Make the "right" (blue) item span all rows.
.right {
    grid-row: 1 / -1;
}
revised codepen



.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: repeat(25, 10px);
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 6 / -1;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>
  <div class="bottom">bottom</div>
</div>





                        
这篇关于删除CSS网格中的空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！