В чем смысл желобов в сеточных структурах CSS?

Я погружаюсь в веб-разработку и играю с фреймворком Blueprint CSS, который включает систему сетки, и у меня есть несколько вопросов.

  1. В чем смысл водостоков? Конечно, они не используются для включения пробела между столбцами, потому что вы можете просто использовать свойство CSS margin для этого, верно? Или желоба — это просто элегантный способ управления полями?
  2. Мне не нужно пространство между столбцами, и я хотел бы создать макет сетки, который не включает желоба, но все инструменты генератора не позволяют мне иметь желоба нулевой ширины. Это почему?
  3. Похоже, что предложенный генератор CSS Blueprint больше не поддерживается. Может ли кто-нибудь предложить генератор CSS Blueprint для изменения сетки, чтобы включить желоба нулевой ширины?

Большое спасибо за вашу мудрость!


css grid blueprint-css
person BeachRunnerFred    schedule 16.03.2011    source источник
comment
Я не использую генераторы, которые не допускают все возможные входные данные.   -  person    schedule 17.03.2011
comment
@Radek S, другими словами, вы не используете генераторы?   -  person The Muffin Man    schedule 17.03.2011
comment
Я не совсем уверен, но я вижу желоба как статическое пространство между столбцами. Я имею в виду, что в отличие от полей, которые связаны с самим столбцом, желоб — это стационарный объект (или черная дыра, или разрыв), который правильно определяет расстояния между соседними столбцами.   -  person juwonlona    schedule 21.12.2018

Ответы (2)


arrow_upward
21
arrow_downward

Мотивация системы CSS Grid заключается в полной автоматизации макета. Промежутки обычно желательны, потому что пустое пространство между столбцами улучшает читаемость, поэтому имеет смысл включить их как часть автоматизации.

Смысл существования генератора в том, чтобы избавить вас от немного утомительных вычислений, необходимых для их реализации, но без желобов и математика, и css совсем не сложны.

Это должно быть очень просто сделать сетку без водосточных желобов без генератора. например

( column width X nº of columns ) + left margin + right margin = content width

.span-1 {width:100px}
.span-2 {width:200px}
.span-3 {width:300px}
.span-4 {width:400px}

etc...
person Chris Bentley    schedule 16.03.2011
comment
Я чувствую, что этот ответ не полностью удовлетворяет вопрос оператора № 1. Желоба управляются через маржу или нет? - person E.E.33; 29.11.2013
comment
@ E.E.33, как говорит bigmattyh, желоба не имеют абсолютно никакого отношения к CSS как таковому…. Свойства CSS, используемые для их создания, зависят от разработчика. - person Chris Bentley; 30.11.2013
comment
@ChrisBentley Спасибо! - person E.E.33; 02.12.2013

arrow_upward
9
arrow_downward

Желоба не имеют абсолютно никакого отношения к CSS как таковому. Это концепция дизайна печатных изданий — они предназначены для создания пробелов между столбцами, что облегчает чтение контента.

Колонны без желобов очень легко рассчитать. Просто установите одинаковую ширину в пикселях для каждого столбца.

person Matt Howell    schedule 16.03.2011