Fit variable content (text or div) inside fixed grid area

Question

I have here an example of a simple css-grid, inside a fixed sized border that represents a standard poker size playing card 63mm x 88mm.

Each area of the card is delineated by the gridlayout, but the content (text mostly) that has to fit in it can be variable length and size. Each grid cell has a "fixed" size of "grid-auto-rows: 1fr" and "grid-auto-columns: 1fr" within the parent constrains of 63mm x 88mm and a grid-area encompass 1 or more of these cells.

I wanted to ask, is there a way for the text font size to decrease and increase automatically depending on how much needs to fit within a given grid area?

And for other kinds of content too, such as images, can you scale to fit within the grid area as well?

I have seen there are maybe ways to do this using svg, but I have so far been short of finding a solution to fit text within a given fixed grid area with variable text length. I would primarily prefer if a solution could be found within HTML and CSS only, but if Javascript is the only reasonable solution I will gladly accept that too.

Thank you kindly in advance

<!doctype html>
<html>
  <head>
    <title>Card</title>
    <style>
    .top { grid-area: top; }
    .image { grid-area: image; }
    .bottom { grid-area: bottom; }

    .border {
  border-radius: 10px;
  width: 63mm;
  height: 88mm;  
  background: black;
  display: grid;
  place-items: center;
}
    .container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'top top top'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'bottom bottom bottom'
    'bottom bottom bottom'
    ;
  grid-gap: 1px;
  width: 58mm;
  height: 83mm;  
  background: white;
  margin: auto auto;
  padding: 0mm;
}

.container > div {
  background-color: #2196F3;
}
    </style>
    <script></script>
  </head>
  
  <body>
  <div class="border">
        <div class="container">
              <div class="top">If this text ends up becoming too long it will end up either overflowing or changing the size, is there a way to change text size to fit within parent size constraints instead?</div>
              <div class="image">ImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImage</div>
              <div class="bottom">Bottom</div>
        </div>
        </div>
  </body>
</html>

score 0 · Answer 1 · answered Aug 12 '20 at 14:53

You need to provide space between words in .image div & it will automatically wrap otherwise use word-break property to break it like below:

.image {
    word-break: break-all;
}

<!doctype html>
<html>
  <head>
    <title>Card</title>
    <style>
    .top { grid-area: top; }
    .image { grid-area: image; }
    .bottom { grid-area: bottom; }

    .border {
  border-radius: 10px;
  width: 63mm;
  height: 88mm;  
  background: black;
  display: grid;
  place-items: center;
}
    .container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'top top top'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'bottom bottom bottom'
    'bottom bottom bottom'
    ;
  grid-gap: 1px;
  width: 58mm;
  height: 83mm;  
  background: white;
  margin: auto auto;
  padding: 0mm;
}

.container > div {
  background-color: #2196F3;
}
    </style>
    <script></script>
  </head>
  
  <body>
  <div class="border">
        <div class="container">
              <div class="top">If this text ends up becoming too long it will end up either overflowing or changing the size, is there a way to change text size to fit within parent size constraints instead?</div>
              <div class="image">ImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImage</div>
              <div class="bottom">Bottom</div>
        </div>
        </div>
  </body>
</html>

Fit variable content (text or div) inside fixed grid area

1 Answers1