0
304
ViewsEvitar que la columna CSS Grid se desborde
Intenté detener el desbordamiento de la columna con max-height, max-width, pero parece que no funciona.
He hecho tres columnas con CSS Grid. Uno para la sección de navegación, uno para la columna izquierda y otro para la columna derecha. la sección de la columna izquierda continúa desbordándose sobre la sección de navegación y la sección de la columna derecha como se muestra en las capturas de pantalla.
Lo que estoy tratando de lograr:
Lo que sucede:
@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap"); * { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #4a6163; font-family: "Asap"; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_grid { display: -ms-grid; display: grid; -ms-grid-columns: 0.25fr (1fr)[2]; grid-template-columns: 0.25fr repeat(2, 1fr); -ms-grid-rows: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; max-height: 100%; max-width: 100%; } .nav_section { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1 / 1 / 1 / 2; border: 3px yellow solid; } .left_column { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 1 / 3; border: 1px yellow solid; } .right_colomn { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 1 / 3 / 1 / 4; border: 2px blue solid; } .left_column > h1 { font-family: "Asap"; color: #f9faf4; font-size: 13rem; font-style: normal; font-weight: normal; line-height: 15.75rem; text-transform: uppercase; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); display: -webkit-box; display: -ms-flexbox; display: flex; border: red 3px solid; -o-object-fit: contain; object-fit: contain; max-width: 100%; max-height: 100%; } .main_bio { color: #f2c4ce; font-size: 1.75rem; text-decoration: underline; } <main> <div class="main_grid"> <div class="nav_section"> <nav class="main_nav"> <a href="#">home</a> <a href="#">work</a> <a href="#">contact</a> </nav> </div> <div class="left_column"> <h1 class="main_title">Hello, I'm Jack</h1> </div> <div class="right_colomn"> <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p> </div> </div> </main>1 answers
Answer question0
Para evitar el desbordamiento, puede usar la regla white-space: nowrap; para tu h1 . Sin embargo, eso también evitará romper la línea después de "Hola".
Por lo tanto, también recomendaría agregar un <br /> después de Hello, para romper explícitamente esa línea.
Eso debería resolver sus problemas de salto de línea, pero noté que también está girando el texto 90deg , y eso puede estropear el ajuste del encabezado dentro de la celda.
Por lo tanto, recomiendo agregar la regla writing-mode: tb-rl ( enlace ) para que el texto se escriba verticalmente y luego girarlo 180 grados en lugar de 90 (para que se convierta de abajo hacia arriba en lugar de arriba hacia abajo)
Este es su fragmento con los cambios sugeridos
@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap"); * { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #4a6163; font-family: "Asap"; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_grid { display: -ms-grid; display: grid; -ms-grid-columns: 0.25fr (1fr)[2]; grid-template-columns: 0.25fr repeat(2, 1fr); -ms-grid-rows: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; max-height: 100%; max-width: 100%; } .nav_section { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1 / 1 / 1 / 2; border: 3px yellow solid; } .left_column { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 1 / 3; border: 1px yellow solid; } .right_colomn { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 1 / 3 / 1 / 4; border: 2px blue solid; } .left_column > h1 { font-family: "Asap"; color: #f9faf4; font-size: 13rem; font-style: normal; font-weight: normal; line-height: 15.75rem; text-transform: uppercase; /* Updated the following 3 lines */ white-space: nowrap; writing-mode: tb-rl; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); display: -webkit-box; display: -ms-flexbox; display: flex; border: red 3px solid; -o-object-fit: contain; object-fit: contain; max-width: 100%; max-height: 100%; } .main_bio { color: #f2c4ce; font-size: 1.75rem; text-decoration: underline; } <main> <div class="main_grid"> <div class="nav_section"> <nav class="main_nav"> <a href="#">home</a> <a href="#">work</a> <a href="#">contact</a> </nav> </div> <div class="left_column"> <h1 class="main_title">Hello,<br/>I'm Jack</h1> </div> <div class="right_colomn"> <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p> </div> </div> </main>