CSS grid create not equal grid

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

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.

BUT Its not work its only push it inline one after another, and ignoring the grid boundaries

.home {
    display: grid;
    grid-template-columns:  4fr 8fr;
    grid-template-rows: 100%;
    height: 100%;
}

<div class="home">
  <div class="col-8">

  </div>
  <div class="col-4">
    <mat-button-toggle-group class="side-menu-button">
      <mat-button-toggle>test </mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
      <mat-button-toggle>test</mat-button-toggle>
    </mat-button-toggle-group>
  </div>
</div>

i even tried changing it to

  grid-template-columns: repeat(1, auto-fill, 4fr 8fr);

Solution

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 .col-8 and .col-4 where they belong inside of the grid you've set up, and set the children you want to wrap to inline-block:

* {
  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;
}

<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>

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.

Here's a pen that contains the above code: https://codepen.io/grantnoe/pen/MdOQOv

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

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

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