Разрыв столбца сетки вызывает переполнение элемента сетки

Я пытаюсь создать сетку из 12 столбцов, как в Bootstrap, но с CSS3 Grid.

Но у меня огромная проблема: если у меня элемент с 8 столбцами, а зазор составляет 40 пикселей, то минимальная ширина равна 40 * 8 = 320px, иначе он будет переполняться.

Я привел здесь пример https://codepen.io/hrsetyono/pen/mpKxba

Есть ли какой-нибудь синтаксис, чтобы это исправить? По этому поводу не так много ресурсов, кроме базового введения.


css css-grid grid
person hrsetyono    schedule 13.01.2018    source источник
comment
Не уверен, что вам нужно. С несколькими уровнями контейнеров сетки и фиксированными промежутками между сетками у вас есть потенциал для переполнения.   -  person Michael Benjamin    schedule 13.01.2018
comment
Кроме того, разместите свой код в самом вопросе. Это сделает вопрос самодостаточным, и вы уменьшите вероятность его закрытия.   -  person Michael Benjamin    schedule 13.01.2018
comment
@Michael_B Извините за поздний ответ, я разместил его как код.   -  person hrsetyono    schedule 17.01.2018
comment
@Michael_B Я пытаюсь преобразовать свой столбец Float в CSS3 Grid. Если я установлю для столбца значение 9fr из 12, я хочу, чтобы он занимал 75% независимо от размера экрана.   -  person hrsetyono    schedule 17.01.2018
comment
Размещено несколько дубликатов, которые могут пролить свет. Если нет, дайте мне знать, и я снова открою вопрос.   -  person Michael Benjamin    schedule 17.01.2018
comment
Предлагаемые дубликаты не решают именно эту проблему. У меня также есть проблема с сеткой, которую требуется, например. Зазор 20 пикселей * 24 столбца = ширина 480 пикселей. Хотя я делаю две колонки с промежутками 10 и 14. Разрыв относится к КАЖДОМУ столбцу.   -  person Stefan    schedule 02.12.2020
comment
Я действительно согласен с комментарием @Stefan. Вы нашли решение этой проблемы?   -  person nomadoda    schedule 26.07.2021
comment
Я полагаю, что имеет смысл, что абсолютная минимальная ширина сетки из 12 столбцов должна быть ее зазором * 11 (в данном случае 40px * 11 = 440px), иначе я не уверен, как мы ожидаем, что сетка будет вести себя при 12 столбцах с элементом в каждом. Единственный обходной путь, который я могу придумать, - использовать как можно меньшее количество столбцов. Поэтому вместо использования макета из 12 столбцов с элементами, охватывающими 8 и 4 столбца соответственно, используйте макет из 3 столбцов с элементами, охватывающими 2 и 1 столбец. Я признаю, что тоже из начальной загрузки, это может быть не тот обходной путь, на который надеялись.   -  person nomadoda    schedule 26.07.2021
comment
Не могли бы вы рассмотреть возможность повторного открытия этого вопроса? @MichaelBenjamin   -  person nomadoda    schedule 26.07.2021