CSS-сетка создает неравную сетку - PullRequest
Новая
       1

CSS-сетка создает неравную сетку

0 голосов
/ 21 мая 2019

начал использовать CSS-сетку вместо boostrap, и у меня возникли некоторые проблемы, чтобы сделать это правильно.

Я хочу создать сетку, в которой есть столбцы 4fr и 8fr (как в столбцах boostrap 8 и 4) и когда div внутри сетки 4r заполняется, 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);

1 Ответ

0 голосов
/ 21 мая 2019

Если вы просто хотите использовать сетку для переноса элементов внутри 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.

...