How to make p tag fill grid cells it's occupying?

Question

This is my first time ever using grid layout, and I'm having trouble having my p tags fill the content of the cell they occupy. So, I do not need help making the grid. I need help expanding the text of the p tag to fill the cell of which the p tag occupies.

Here is the code: NOTE: The first half consists of Andy Bell's Modern CSS Reset. I modified only parts of it which would've been overwritten later.

*, *::before, *::after {
  box-sizing: border-box;
}

body, p {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-size: 1rem;
  height: 100%;
  overflow: hidden;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  width: 100%;
  height: 100%;
}

.typography-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-areas: 
      'text-section-one text-section-one . . . . .'
      '. . image image image . .'
      'small-text . . . . text-section-two text-section-two';
}

img {
  grid-area: image;
  aspect-ratio: 1;
  width: 65%;
  margin: 0 auto;
  z-index: 1;

  box-shadow: 0px 0px 10px 0px black;
}

/* p {
  width: 100%;
  font-size: 2rem;
  font-size: 5vw;
} */

.text--small {
  font-style: italic;
  width: 80%;
  text-align: left;
  grid-area: small-text;
}

#large1 {
  grid-area: text-section-one;
}

#large2 {
  letter-spacing: 1rem;
  grid-column: 2 / 7;
  grid-row: 2;
}

#large3 {
  grid-area: text-section-two;
}

<!DOCTYPE html>
<html>
  <head>
    <!-- 
    <script>
      textFit(document.querySelector("p"), 0.5);
      fitText(document.querySelector("p"), 0.5);
      fitty('p');
    </script>
   -->
  </head>
  <body>
    <div class="container">
        <div class="typography-grid">
            <p class="text text--large" id="large1">TEXT</p>
            <p class="text text--large" id="large2">TEXT</p>
            <img src="https://andyspizzaandsubs.com/wp-content/uploads/2018/11/blog-ph.jpg" alt="sample image">
            <p class="text text--small">SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>
            <p class="text text--large" id="large3">TEXT</p>
        </div>
    </div>
</body>
</html>

I've tried the items commented out under the p tag selector, but there doesn't seem to be a perfect magic number where everything doesn't get pushed out of frame. I've also tried width: fit-content; to see if that would change anything, but nothing did.

Last thing I tried was following this previous SO post: Font scaling based on width of container I used script tags in the head of my HTML (which didn't work), and the relative units didn't work for reasons mentioned before.

Is this possible? I'm aiming for a large-typography-style website, so I need the p tags to fill the grid cells they occupy, or sort of stretch to fill the cells they occupy. Is there a workaround? Any help is appreciated! Thank you.

Hi:) Its' not clear how your grid should look like. Could you add a picture? — Azu, Dec 30 '21 at 18:01
@Azu Just edited my post. The image is beneath the code snippet. If you'd like, I can add a drawing of what it should look like, but, being in a moving car, it might not be of the best quality. — Paul Clauss, Dec 30 '21 at 18:20
Not sure how to go about this, Do you want to text to fill the cell no matter what ? like if the text is short, like a single word, should it grow in font-size to fill the cell up ? because that might disrupt the height. How exactly do you want this to happen ? — Rainbow, Dec 31 '21 at 11:06
@ZohirSalak Yes, that is exactly what I want to happen. If text is short/long, it should fill the cell entirely. I was fiddling with it a bit and, yes, it does disrupt the height a bit. Is there a workaround? I Googled some large typography websites to try and see what worked for them using the dev tools, but there didn't seem to be any HTML element that defined their text. (This website in particular: https://www.thibaudallie.com/) — Paul Clauss, Jan 01 '22 at 15:51
in that case you'll have to use viewport relative units [`vh and vw`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units), you'll have to do some calculation to subtract the with of the containers from the overall viewport dimensions, this is exactly what that website is uing — Rainbow, Jan 01 '22 at 16:58
@ZohirSalak Ah, must've missed it in the dev tools. Thank you! Would you mind posting this as an answer so I can mark it as a solution? — Paul Clauss, Jan 01 '22 at 17:57

Azu · Answer 1 · 2021-12-31T09:08:38.507

.container {        
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 5px;
    }
    .container div {
        border: 1px solid red;
    }
    .item1 {
        grid-column: 1 / span 2;
    }
    .item2 {
        grid-column: 3 / span 6;
    }
    .item3 {
        grid-column: 1 / span 1;
    }
    .item4 {
        grid-column: 2 / span 6;
        place-self: center;
    }
    .item5 {
        grid-column: 8 / span 1;
    }
    .item6 {
        grid-column: 1 / span 1;
    }
    .item7 {
        grid-column: 2 / span 5;
    }
    .item8 {
        grid-column: 7 / span 2;
    }

<div class="container">
        <div class="item1">text-selection-one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque risus libero. Integer nec maximus mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4"><img src="https://andyspizzaandsubs.com/wp-content/uploads/2018/11/blog-ph.jpg" style="width:100px; height:auto" alt="Sample image"></div>
        <div class="item5">item5</div>
        <div class="item6">small-text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque risus libero. Integer nec maximus mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
        <div class="item7">item7</div>
        <div class="item8">text-selection-three</div>                
    </div>

Perhaps this is a better grid than mine, and I might implement it this way. Though, I'm asking how to make it so that the text within my p tags fills the cells they occupy. Unfortunately, adjusting the font-size or using JS either makes the font size too big (forcing everything out of frame) or doesn't do anything at all. At least, for the things I tried; mentioned above. — Paul Clauss, Dec 30 '21 at 21:27
Sorry, I don't remember what it looked like before. What did you change? Did you add more text in the divs? If so, this won't work. Some cells have longer text than others. regardless of the length, I need all pieces of text to stretch to fill the cell they occupy; I can't just add more text to the p tags so that they eventually fill the cell. — Paul Clauss, Jan 01 '22 at 15:54

How to make p tag fill grid cells it's occupying?

1 Answers1