Search code examples
htmlcsscss-grid

Wrap text onto other side of a grid cell with CSS

Given this html structure, where LLGrid is displayed as grid in CSS, how can I make sure that my text is wrapped into the same cell, as if it was divided into two columns?

I did not manage to find a way to program the text to do this, so it keeps overflowing outside of the cell because it is too long.

Result

.LLgrid {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: red;
  position: center;
  padding: 10px;
  width: 1400px;
}

.cell {
  /* center the cell content */
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  background: white;
  width: 680px;
  height: 150px;
  color: black;
  font-size: 12px;
  overflow-wrap: break-word;
}
<div class="LLcontainer">
  <div class="LLgrid">
    <div class="cell" id="1"> one
      <div class="row">
        <div class="column">
          <p>Very very long text <br> Broken into multiple lines </p>
        </div>
      </div>
    </div>

    <div class="cell" id="2"> two </div>
    <div class="cell" id="3"> three </div>
    <div class="cell" id="4"> four </div>
    <div class="cell" id="5"> five </div>
    <div class="cell" id="6"> six </div>
  </div>
</div>

EDIT 08 September 2021:

is subordinated to (whose CSS is posted below). So when I apply the solution proposed by **Jonty** I still have messy cells. I am running now the CSS as for the [Demo1][2] Snippet. 
.screen {
    width: 1450px;
    margin: 0 auto;
    padding: 20px 24px;
    font-family: verdana, arial;
    text-align: center;
    background: #130a06;
    color: white;
}
Solution

  • Finally, I managed to deploy a solution of my own.

    I removed the suggested inner div row, column and I operated on the div class="cell" directly.

    On CSS I used the column attributes to get the text displayed as I need. Afterwards I formatted the text to be visible in its entirety.

    This solution is the best fit for me, as the page is meant to be static (it will serve as a dashboard and not as a website, therefore I count with some rigidity).

    .cell {
  justify-content: center;
  column-count: 3;
  align-items: center;
  font-family: Arial;
  background: white;
  width: 848px;
  height: 310px;
  color: black;
  font-size: 16px;
  margin: 5px;
  overflow-wrap: break-word;
  /*Column Style*/
  column-count: 3;
  column-gap: 40px;
  column-rule-width: 440px;
}