У меня есть две колонки сетки.Размер шрифта и высота строки левого столбца в два раза больше, чем справа.
Идея такова: каждая вторая базовая линия справа соответствует базовой линии левого столбца (для хорошей типографии).
Однако это не работает, потому что "высота строки" разделяет начальную (разрыв между текстом) в до-и после-строке (в отличие от набора текста).
Это может сработать, если все ведущие идут после или перед линией, но как я могу это сделать?
Пример: https://www.bilder -upload.eu / upload / c7ce94-1553775633.png Токак это должно выглядеть: https://bilder -upload.eu / upload / ce728b-1553777442.png
(я пробовал с другим полем в левой колонке, но это не точнои как-то не так, и у каждого шрифта есть другое значение, о котором нужно догадаться!)
.grid {
display: grid;
grid-gap: 0px;
grid-template-columns: 1fr 1fr;
}
.one,
.two {
line-height: 1;
}
.one {
font-size: 36px;
}
.two {
font-size: 18px;
}
<body>
<div class="grid">
<div class="one">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
<div class="two">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
</div>
</body>