CSS базовая сетка: заголовки и упаковка

Question

Я пытаюсь понять математику за создание сплошной базовой сетки в CSS/SASS.

До сих пор я могу установить текст в сетку для данной страницы, но как только заголовок изменит длину и обертывания, все следующие элементы находятся вне сетки.

Возьмите эту простую HTML код:

<h1>A big greyish rounded bulk, the size, perhaps, of a bear, was</h1> 
<p>A big greyish rounded bulk, the size, perhaps, of a bear, was rising slowly and painfully out of the cylinder. As it bulged up and caught the light, it glistened like wet leather.</p> 
<p>Two large dark-coloured eyes were regarding me steadfastly. The mass that framed them, the head of the thing, was rounded, and had, one might say, a face. There was a mouth under the eyes, the lipless brim of which quivered and panted, and dropped saliva. The whole creature heaved and pulsated convulsively. A lank tentacular appendage gripped the edge of the cylinder, another swayed in the air.</p> 

Вместе с этим SASS код:

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600"); 

// These are the basic values to set up a baseline & vertical rhythm 
$font-size: 16px; 
$line-height: 24px; 
$rhythm-unit: $line-height; 

html { 
    background-image: url(http://basehold.it/i/24); 
    font-family: "Open Sans"; 
    // Converting the font size to em 
    font-size: ($font-size/16px) * 1em; 
    // Converting the line height to a unitless number 
    line-height: $line-height/$font-size; 
} 

// Vertical rhythm & single margin direction 
h1, 
p { 
    margin-top: 0; 
    margin-bottom: $rhythm-unit; 
} 

h1 { 
    // Arbitrary values that look good 
    font-size: 3.375em; 
    line-height: 1.3; 

    // To now restore the baseline grid, we need to apply 
    // a margin bottom value that accomodates for font size 
    // and line height. 
    // 
    // Font size in px: 3.375 * $font-size = 54px 
    // The next multiple of our $rhythm-unit is 56. That 
    // means 2px need to be shifted. 
    // 2px in em: 2/54px = 0.03703703704; 
    margin-bottom: 0.03703703704em; 

    // Now that we have accomodated for font size, we need 
    // to do the same with line height. 
    // Line height in px: 1.3 * 54px = 70.2px 
    // The next multiple of our $rhythm-unit is 72. That 
    // means 1.8px need to be shifted. 
    // 1.8px in em: 1.8/54px = 0.03333333333; 
    margin-bottom: 0.03703703704em + 0.03333333333em; 
} 

Как вы можете видеть, я прокомментирован его в надежде, что это легче понять Live Example.

Чтобы увидеть поведение описано, просто изменить длину <h1> и посмотреть, что происходит со следующими пунктами:

OK

NOT OK

В этом примере эффект может быть минимальным, но для более длинных текстов он начинает двигаться сильнее и сильнее.

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

• Все тексты, связанные измерения в эм
• font-size & line-height должны быть установлены свободно, не следуя некоторым кратные или как
• line-height должен быть без единиц
• Я не знаю, сколько строк заголовок или абзац будет обертываться.

Answer 1

К счастью, эта математика была разработана для вас. Вы можете:

• использование Compass' vertical rhythm mixins
• копия compass' vertical rhythm source code (или его части) в свой проект
• или проверить один из многих вариантов, доступных через http://bower.io/search/?q=vertical%20rhythm

Успехов!