Question

开始使用CSS网格而不是boostrap，而且我在解决问题时遇到了问题。

我想创建一个具有4fr和8fr列的网格布局（就像boostrap 8和4列一样）然后当4r网格中的div填满时，div就会像flex-wrap：wrap一样转到第二行。

但无法正常工作，只能将其一个接一个地插入并忽略网格边界

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

我什至尝试将其更改为

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

Answer 1

如果您只是想使用网格将项目包装在div中，则您所做的基本上应该可以工作。不要忘记告诉.col-8和.col-4它们在您设置的网格中的位置，并将要包装的子级设置为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>

之所以我设置12列而不是8fr和4fr是因为我不清楚您是否要使用12列可用系统，例如bootstrap（这是我实现的方式），或者只有两列。无论哪种方法都可以满足您在问题中所描述的内容，但是稍后可以说12个单独的列可以扩展。

这是一支包含以上代码的笔： https://codepen.io/grantnoe/pen/MdOQOv

grid-area是我用来设置.home子代的位置的。格式如下：

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

唯一的警告是，您已将要包装的子级嵌套在辅助元素<mat-button-toggle-group>中。考虑将元素的宽度调整为100％，以填充网格的子元素.col-4。

CSS网格创建不相等的网格

1 个答案: