El texto no se ajusta en la cuadrícula CSS

He estado experimentando con CSS Grid y estoy atascado en encontrar los medios más efectivos para que el texto se ajuste a un<div> elemento que se coloca parcialmente encima de otros dos<div/> elementos. Básicamente, como en la imagen a continuación, quiero que el texto en los divs rojo y azul se ajuste al div amarillo que se ha posicionado parcialmente en las columnas y filas de los otros dos elementos. Obviamente, este es un diseño basado en la cuadrícula, por lo que no estoy interesado en hacer esto con flotadores típicos. ¿Cómo puedo usar CSS Grid para lograr este efecto?

Aquí está mi CSS y HTML:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.red {
  background-color: red;
  grid-column: 1 / span 2;
  grid-row: 1 / span 4;
}

.blue {
  background-color: blue;
  grid-column: 3 / span 2;
  grid-row: 1 / span 4;
}

.yellow {
  background-color: yellow;
  grid-column: 2 / span 2;
  grid-row: 2 / 4;
}
<div class="grid">
  <div class="red">According to the Oxford English Dictionary, hello is an alteration of hallo, hollo,[1] which came from Old High German "halâ, holâ, emphatic imperative of halôn, holôn to fetch, used especially in hailing a ferryman."[5] It also connects the development
    of hello to the influence of an earlier form, holla, whose origin is in the French holà (roughly, 'whoa there!', from French là 'there').[6] As in addition to hello, halloo,[7] hallo, hollo, hullo and (rarely) hillo also exist as variants or related
    words, the word can be spelt using any of all five vowels.[8][9][10]</div>
  <div class="blue">The use of hello as a telephone greeting has been credited to Thomas Edison; according to one source, he expressed his surprise with a misheard Hullo.[11] Alexander Graham Bell initially used Ahoy (as used on ships) as a telephone greeting.[12][13]
    However, in 1877, Edison wrote to T.B.A. David, the president of the Central District and Printing Telegraph Company of Pittsburgh: Friend David, I do not think we shall need a call bell as Hello! can be heard 10 to 20 feet away. What you think? Edison
    - P.S. first cost of sender & receiver to manufacture is only $7.00.[14] By 1889, central telephone exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] By 1889, central telephone
    exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] </div>
  <div class="yellow">3</div>
</div>

Respuestas a la pregunta(0)

Su respuesta a la pregunta