blocks|key|2518852|text|如果您只是想使用网格在div中包装项目，那么您所做的基本上应该是可行的。不要忘记告诉.col-8和.col-4它们在您设置的网格中的位置，并将您想要包装的子项设置为inline-block|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2518853|​|2518854|*+{
++box-sizing:+border-box;
}

.home+{
++display:+grid;
++grid-template-columns:+repeat(12,+1fr);
++grid-template-rows:+100%25;
++height:+100%25;
++width:+100%25;
++grid-gap:+20px;
}

.col-8+{
++grid-area:+1/1/1/9;
}

.col-4+{
++grid-area:+1/9/1/13;
}

.bluebox,
.blackbox+{
++display:+inline-block;
++width:+50px;
++height:+20px;
}

.bluebox+{
++background-color:+blue;
}

.blackbox+{
++background-color:+black;
}|code-block|syntax|javascript|2518855|<div+class="home">
++<div+class="col-8">
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++++<div+class="bluebox"></div>
++</div>
++<div+class="col-4">
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++++<div+class="blackbox"></div>
++</div>
</div>|2518856|2518857|我之所以设置12列而不是8fr的列和4fr的列，是因为我不清楚您是否想要像bootstrap这样的12列可用的系统(这是我实现它的方式)，或者字面上只有两列。无论哪种方式都应该适用于您在问题中描述的内容，但12个单独的列在以后可能更具可扩展性。|2518858|这是一支包含上述代码的笔：https://codepen.io/grantnoe/pen/MdOQOv|2518859|grid-area是我用来设置.home的孩子的位置的东西。格式如下：|2518860|grid-area:+<row-start>+/+<column-start>+/+<row-end>+/+<column-end>;|2518861|唯一需要注意的是，您已经将想要包装的子元素嵌套在辅助元素<mat-button-toggle-group>中。考虑将该元素的宽度调整为100%25，以填充网格的子.col-4。|2518862|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/grantnoe/pen/MdOQOv^0|16|6|1D|6|2A|C|0|0|0|0|0|0|D|12|0|0|0|9|0|0|1V|0|S|P|27|6|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1I|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|T|3|U|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

<p>If you're just wanting to use the grid to have items wrap inside of a div, what you're doing should basically work. Don't forget to tell <code>.col-8</code> and <code>.col-4</code> where they belong inside of the grid you've set up, and set the children you want to wrap to <code>inline-block</code>:</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>* {
  box-sizing: border-box;
}

.home {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100%;
  height: 100%;
  width: 100%;
  grid-gap: 20px;
}

.col-8 {
  grid-area: 1/1/1/9;
}

.col-4 {
  grid-area: 1/9/1/13;
}

.bluebox,
.blackbox {
  display: inline-block;
  width: 50px;
  height: 20px;
}

.bluebox {
  background-color: blue;
}

.blackbox {
  background-color: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="home"&gt;
  &lt;div class="col-8"&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
    &lt;div class="bluebox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-4"&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
    &lt;div class="blackbox"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The reason I set up 12 columns instead of one that's 8fr and one that's 4fr is because I'm unclear about whether you're wanting a 12 column usable system like bootstrap (which is the way I implemented it), or literally only two columns. Either way should function for what you are describing in your question, but 12 separate columns is arguably more extensible later-on.</p>

<p>Here's a pen that contains the above code:
<a href="https://codepen.io/grantnoe/pen/MdOQOv" rel="nofollow noreferrer">https://codepen.io/grantnoe/pen/MdOQOv</a></p>

<p><code>grid-area</code> is what I used to set the location of .home's children. The format is as follows:</p>

<p><code>grid-area: &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;;</code></p>

<p><strong>The only caveat</strong> is that you've nested the children you're wanting to wrap inside of secondary element <code>&lt;mat-button-toggle-group&gt;</code>. Consider adjusting the width of that element to 100% to fill the grid's child <code>.col-4</code>.</p>


<p>started using CSS grid instead of boostrap, and im having some issue to get it right.</p>

<p>i want to create a grid layout that have 4fr, and 8fr columns (just like boostrap 8 and 4 columns)
and when the divs inside the grid of 4r gets fill its the divs go to a second row just like flex-wrap:wrap.</p>

<p>BUT Its not work its only push it inline one after another, and ignoring the grid boundaries</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>.home {
    display: grid;
    grid-template-columns:  4fr 8fr;
    grid-template-rows: 100%;
    height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="home"&gt;
  &lt;div class="col-8"&gt;

  &lt;/div&gt;
  &lt;div class="col-4"&gt;
    &lt;mat-button-toggle-group class="side-menu-button"&gt;
      &lt;mat-button-toggle&gt;test &lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle&gt;test&lt;/mat-button-toggle&gt;
    &lt;/mat-button-toggle-group&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>i even tried changing it to   </p>

<pre><code>  grid-template-columns: repeat(1, auto-fill, 4fr 8fr);
</code></pre>


CSS grid create not equal grid

开始使用CSS网格而不是boostrap，我遇到了一些问题来解决它。我想创建一个有4fr和8fr列的网格布局(就像boostrap 8和4列一样)，当4r网格中的div填满它时，div就会转到第二行，就像flex-wrap:wrap一样。但它并不工作，它只是一个接一个地推动它内联，而忽略了网格的边界​.home {  ...

问CSS网格创建不相等的网格
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格创建不相等的网格EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格创建不相等的网格
EN