网格项目应该跨行而不是列 [英] grid items should flow across rows, not columns

问题描述

我有一个网格，其中包含7个动态大小的div，其中包含2个块，应与7个动态div网格的第2行对齐。

工作，除了网格定位为列，我希望它是行。看到小提琴，1-7应该穿过顶部
https://jsfiddle.net/juzkxo20/ 5 /

 < div class ='content'> 
< div class ='left'>< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 1< / div> 
< div class ='dynamic'>< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 2< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 3< / div> 
< div class ='dynamic'>< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 4< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 5< / div> 
< div class ='dynamic'>< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 6< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='column-with-dynamic-content'> 
< div class ='dynamic'> 7< / div> 
< div class ='dynamic'>< / div> 
< / div> 
< div class ='right'>< / div> 
< / div> 
 
 .content {
 display：grid; 
 grid-template-columns：1fr 7fr 1fr; 
 grid-auto-rows：50px; 
 grid-gap：10px; 
 grid-auto-flow：column; 
} 
 
 .column-with-dynamic-content {
 display：grid; 
 grid-template-columns：repeat（7，1fr）; 
 grid-auto-rows：50px; 
 grid-gap：10px; 
 grid-column：2/3; 
} 
 
 .left {
 grid-column-start：1; 
 grid-row：2/3; 
} 
 
 .right {
 grid-column-end：-1; 
 grid-row：2/3; 
} 
 
 / *只是演示样式* / 
 .left，.right {border：2px纯红色; } 
 .dynamic {background-color：lightgray;边框：1px纯灰色; } 
  

解决方案

这是解决您的问题的一种方法，刚刚学习CSS网格，但我认为大部分是正确的。

你是.column-with-dynamic-content创建一个包含7列的模板，但是，在这个容器中只有3个子div，它正在寻找7.你需要这个类来包含所有包含动态div的所有7个父div。我创建了一个类来显示你。

.content {display：grid ; grid-template-columns：1fr 7fr 1fr; grid-auto-rows：50px; grid-gap：10px; grid-auto-flow：column;}。column-with-dynamic-content {display：grid; grid-auto-rows：50px; grid-gap：10px;}。seven-children-column {display：grid; grid-template-columns：repeat（7，1fr）; grid-auto-rows：50px; grid-gap：10px; grid-column：2/3;}。left {grid-column-start：1; grid-row：2/3;} right {grid-column-end：-1; grid-row：2/3;} / *只是演示样式* /。left，.right {border：2px solid red;}。dynamic {background-color：lightgray; border：1px solid gray;}

< div class = '内容' > < div class ='left'>< / div> < div class ='seven-children-column'> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 1< / div> < div class ='dynamic'>< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 2< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 3< / div> < div class ='dynamic'>< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 4< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 5< / div> < div class ='dynamic'>< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 6< / div> < div class ='dynamic'>< / div> < / DIV> < div class ='column-with-dynamic-content'> < div class ='dynamic'> 7< / div> < div class ='dynamic'>< / div> < / DIV> < / DIV> < div class ='right'>< / div>< / div>

I have a grid that contains 7 dynamically sized divs surrounded by 2 blocks that should align with the 2nd row of the 7 dynamic div grid.

I have it mostly working, except that the grid is orientated as columns and I want it to be rows. See fiddle, 1-7 should go across the top https://jsfiddle.net/juzkxo20/5/

<div class='content'>
  <div class='left'></div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>1</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>2</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>3</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>4</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>5</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>6</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>7</div>
    <div class='dynamic'></div>
  </div>
  <div class='right'></div>
</div>

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;  
  grid-gap: 10px;
grid-auto-flow: column;
}

.column-with-dynamic-content {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3 ;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3 ;
}

/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray;  border: 1px solid gray; }

解决方案

Here is one way to solve your problem, I'm just now learning css grid, however I think most of this is correct.

You're .column-with-dynamic-content is creating a template with 7 columns, however, you only have 3 child divs inside of this container, it's looking for 7. You need this class to contain all 7 parent divs that contain the dynamic divs. I created a class below to show you.

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-auto-flow: column;
}

.column-with-dynamic-content {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.seven-children-column {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3;
}


/* just demo styles */

.left,
.right {
  border: 2px solid red;
}

.dynamic {
  background-color: lightgray;
  border: 1px solid gray;
}

<div class='content'>
  <div class='left'></div>
  <div class='seven-children-column'>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>1</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>2</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>3</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>4</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>5</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>6</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>7</div>
      <div class='dynamic'></div>
    </div>
  </div>
  <div class='right'></div>
</div>

这篇关于网格项目应该跨行而不是列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！