начал использовать сетку 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);
@TemaniAfif да, но загрузчик поставляется с кучей сотрудников, которые мне не нужны. Могу ли я импортировать только макет сетки?
Мне это кажется нормальным поведением? У вас есть одна строка с 2 столбцами. И вы помещаете все «тестовые» значения в столбец 8. Значит, они останутся там? Это не игнорирование границ?
Я никогда не говорил, что вы должны использовать бутстрап. Я сказал, что bootstrap использует flexbox, поэтому то, что вы хотите, больше подходит для flexbox.
@TemaniAfif Так что же мне использовать, если не boostrap? только флексбокс? Я подумал, что лучше установить некоторые границы, а затем использовать flexbox внутри. это большой проект с множеством кнопок и экранов, и он также должен быть отзывчивым. Что вы думаете?
Если вы просто хотите использовать сетку для переноса элементов внутри 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
.
в качестве примечания, bootstrap использует flexbox, который здесь больше подходит