Wie mache ich Text in einem Netzwickel, anstatt das Raster unter dem Block daneben zu stapeln? ⇐ CSS

[Anonymous]

Ich habe hier an meiner ersten Website gearbeitet, und wenn das Ansichtsfenster unter etwa 1660 px breit fällt, wird das Raster rechts unter der Div links stapeln. Dies geschieht ungefähr zu dem Punkt, an dem sich das erste Div des Gitters der Breite seiner längsten Textzeile nähert, sodass ich mir ziemlich sicher bin, dass es das Raster darunter bewegt, bevor er den Text hineinwickelt. Wie kann ich es an Ort und Stelle halten (wie es ist, wenn das Ansichtsfenster mindestens 1660 px breit ist) und den Text einwickelte, anstatt darunter zu stapeln? sowie float: links und sogar unterschiedliche Anzeigwerte. Shrinkwrapping ist auch nicht das, wonach ich suche, weil ich möchte, dass der Div schmaler wird < /em> als sein Inhalt, und den Text nach innen zu erzwingen. PrettyPrint-Override ">

Code: Select all

#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1em;
}

/*div on the left*/
#map {
width: 790px;
height: 670px;
border-image: url("assets/frame.png") 90 / 100px;
padding: 90px;
}

#grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1em;
padding: 1em;
flex-grow: 1;
max-width: 850px;
}

/*div containing the text that i want to wrap*/
#mods {
grid-area: 1 / 1 / 2 / 2;
max-height: 400px;
background-color: cyan;
border-image: linear-gradient(red, orange, yellow, lime, cyan, blue, indigo, purple, deeppink) 10/10px;
}

/*inside of the above div, contains the text i want to wrap*/
#scrollbar {
overflow-y: scroll;
max-height: 300px;
margin: 0 15px;
}

#discord {
grid-area: 1 / 2 / 2 / 3;
overflow-y: clip;
}

#blog {
grid-area: 2 / 1 / 3 / 3;
background-image: url('https://dl.glitter-graphics.com/pub/3086/3086545fdogblrjva.gif');
background-attachment: fixed;
background-repeat: repeat;
box-shadow: 6px 6px 6px rgba(22, 0, 80, 0.88);
border: 6px ridge #f2ff60;
max-height: 380px;
overflow-y: scroll;
}

#blogcontainer {
margin: 1em auto;
max-width: 503px;
justify-content: center;
background-color: lightyellow;
border: thin dashed #5F0247;
padding: 0 20px;
}< /code>



content


content

content



content


content