Currently, I am working on creating a responsive text section with a grid-like horizontal line resembling paper, and the challenge lies in aligning the text properly within this grid.
While I can achieve this when the font size remains constant, I am curious if it is achievable using only CSS or if JavaScript is needed.
I have included two CodePen examples - one showcasing the desired outcome with a fixed font size, and the other demonstrating how to accomplish the same effect using the 'clamp' CSS property. However, the latter does not consistently align with the grid as intended.
Below is a code snippet from the CodePen attempt at achieving grid alignment using CSS grid:
:root{
--fs:clamp(2rem, 4vw , 5rem);
}
.paper{
position: relative;
}
.paper h2 {
font-size:var(--fs);
line-height:calc(var(--fs) + 0.05rem);
}
.paper:after {
content:'';
position:absolute;
overflow:hidden;
top:calc(-2*var(--fs) - 0.65rem);
left:-10%;
width:120%;
height: 170%;
z-index:-1;
background-image: repeating-linear-gradient(
transparent 0rem,
transparent calc(var(--fs) + 0.1rem),
rgba(0,0,0,0.2) calc(var(--fs) + 0.2rem)
);
}
My question now is whether there is a more effective approach to achieve the same effect - either through CSS or JavaScript?