blocks|key|4139827|text|使用grid-auto-flow:+row。然后，您需要为第2项和第4项设置特殊规则，只需设置行就足够了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4139828|我已经删除了grid-templated-rows:+auto属性，它是默认属性，如果您以这种方式定位元素，则不需要它。|4139829|​|4139830|.wrapper+{
++++border:+2px+solid+#f76707;
++++border-radius:+5px;
++++background-color:+#fff4e6;
}

.wrapper+>+div+{
++++border:+2px+solid+#ffa94d;
++++border-radius:+5px;
++++background-color:+#ffd8a8;
++++padding:+1em;
++++color:+#d9480f;
}
.wrapper+{
++display:+grid;
++grid-template-columns:+repeat(3,+1fr);
++grid-auto-flow:+row+dense;
++grid-gap:+10px;
}

.wrapper+div:nth-child(-2n+%2B+4)+{
++grid-row:+2;
++background-color:+yellow;
}|code-block|syntax|javascript|4139831|<div+class="wrapper">
++<div>One</div>
++<div>Two</div>
++<div>Three</div>
++<div>Four</div>
++<div>Five</div>
++
++<div>Six</div>
++<div>Seven</div>
++<div>Eight</div>
++<div>Nine</div>
++<div>Ten</div>
++<div>Eleven</div>
++<div>Twelve</div>
</div>|4139832|4139833|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Use grid-auto-flow: row. And then you need to set a special rule for items 2 and 4, just setting the row will be enough.</p>

<p>I have removed the grid-templated-rows: auto property, it's the default, and it's not needed if you position the elements this way.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 10px;
}

.wrapper div:nth-child(-2n + 4) {
  grid-row: 2;
  background-color: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
  &lt;div&gt;Eight&lt;/div&gt;
  &lt;div&gt;Nine&lt;/div&gt;
  &lt;div&gt;Ten&lt;/div&gt;
  &lt;div&gt;Eleven&lt;/div&gt;
  &lt;div&gt;Twelve&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4140211|text|您可以使用自动流来形成网格(就像@vals的答案所建议的那样)，然后通过一组:nth-child()规则设置网格的填充顺序：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4140212|​|4140213|.wrapper+{
++++border:+2px+solid+#f76707;
++++border-radius:+5px;
++++background-color:+#fff4e6;
}

.wrapper+>+div+{
++++border:+2px+solid+#ffa94d;
++++border-radius:+5px;
++++background-color:+#ffd8a8;
++++padding:+1em;
++++color:+#d9480f;
}
.wrapper+{
++display:+grid;
++grid-template-columns:+repeat(3,+1fr);
++grid-auto-flow:+row+dense;
++grid-gap:+10px;
}

.wrapper+>+:nth-child(6n+%2B+1),
.wrapper+>+:nth-child(6n+%2B+2)+{
++grid-column:+1;
}

.wrapper+>+:nth-child(6n+%2B+3),
.wrapper+>+:nth-child(6n+%2B+4)+{
++grid-column:+2;
}

.wrapper+>+:nth-child(6n+%2B+5),
.wrapper+>+:nth-child(6n+%2B+6)+{
++grid-column:+3;
}|code-block|syntax|javascript|4140214|<div+class="wrapper">
++<div>One</div>
++<div>Two</div>
++<div>Three</div>
++<div>Four</div>
++<div>Five</div>
++
++<div>Six</div>
++<div>Seven</div>
++<div>Eight</div>
++<div>Nine</div>
++<div>Ten</div>
++<div>Eleven</div>
++<div>Twelve</div>
++
++<div>Thirteen</div>++++++
++<div>Fourteen</div>++++++
++<div>And+so+on</div>
</div>|4140215|4140216|entityMap^0|12|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>You can use auto flow to form grid (like @vals's answer suggests) and then set the pattern in which order it should be populated via set of <code>:nth-child()</code> rules:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 10px;
}

.wrapper &gt; :nth-child(6n + 1),
.wrapper &gt; :nth-child(6n + 2) {
  grid-column: 1;
}

.wrapper &gt; :nth-child(6n + 3),
.wrapper &gt; :nth-child(6n + 4) {
  grid-column: 2;
}

.wrapper &gt; :nth-child(6n + 5),
.wrapper &gt; :nth-child(6n + 6) {
  grid-column: 3;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
  &lt;div&gt;Eight&lt;/div&gt;
  &lt;div&gt;Nine&lt;/div&gt;
  &lt;div&gt;Ten&lt;/div&gt;
  &lt;div&gt;Eleven&lt;/div&gt;
  &lt;div&gt;Twelve&lt;/div&gt;
  
  &lt;div&gt;Thirteen&lt;/div&gt;      
  &lt;div&gt;Fourteen&lt;/div&gt;      
  &lt;div&gt;And so on&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have 12 children <code>div</code>s in my <code>.wrapper</code> element that I'd like to stack next to each other. The number 12 is actually dynamic so I have no idea how many children I'll have. Right now my grid layout looks like this:  </p>

<pre><code>.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column dense;
  grid-gap: 10px;
}
</code></pre>

<p>This is fine until the grid should start wrapping the elements (the layout is full, the grid is 3x2 which holds 6 elements). The seventh, eigth and all of the rest are stacked next to the first six, although I would want them to be in a new line with the same template (so essentially my grid would become 2x(3x2)).</p>

<p>The explanation probably doesn't make too much sense on its own, check out the <a href="https://codepen.io/anon/pen/gKVYzO" rel="nofollow noreferrer">Codepen</a> as well.</p>

<p>How do I make the elements after the sixth one wrap into a new line?</p>


How to make a CSS grid wrap automatically if the templates are set for columns and rows?

我的.wrapper元素中有12个子div，我希望将它们堆叠在一起。数字12实际上是动态的，所以我不知道我会有多少个孩子。现在，我的网格布局如下所示：.wrapper {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-row...

问如果模板是为列和行设置的，如何让CSS网格自动换行？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果模板是为列和行设置的，如何让CSS网格自动换行？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果模板是为列和行设置的，如何让CSS网格自动换行？
EN