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

начал использовать сетку 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);

в качестве примечания, bootstrap использует flexbox, который здесь больше подходит

Temani Afif 21.05.2019 15:35

@TemaniAfif да, но загрузчик поставляется с кучей сотрудников, которые мне не нужны. Могу ли я импортировать только макет сетки?

Roberto 21.05.2019 16:11

Мне это кажется нормальным поведением? У вас есть одна строка с 2 столбцами. И вы помещаете все «тестовые» значения в столбец 8. Значит, они останутся там? Это не игнорирование границ?

Wimanicesir 21.05.2019 16:12

Я никогда не говорил, что вы должны использовать бутстрап. Я сказал, что bootstrap использует flexbox, поэтому то, что вы хотите, больше подходит для flexbox.

Temani Afif 21.05.2019 16:14

@TemaniAfif Так что же мне использовать, если не boostrap? только флексбокс? Я подумал, что лучше установить некоторые границы, а затем использовать flexbox внутри. это большой проект с множеством кнопок и экранов, и он также должен быть отзывчивым. Что вы думаете?

Roberto 21.05.2019 16:16
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
5
498
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 столбцами, такая как бутстрап (именно так я ее реализовал), или буквально только два столбца. . Любой способ должен работать для того, что вы описываете в своем вопросе, но 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.

Другие вопросы по теме