grid issue, beginner's level, grid item gets too wide when adding content |
grid issue, beginner's level, grid item gets too wide when adding content |
seyman |
Sep 2 2020, 10:14 AM
Post
#1
|
Group: Members Posts: 1 Joined: 2-September 20 Member No.: 27,526 |
Hello,
I have begun playing around with grids. It's going ok, but I am facing an issue. I have created a grid system, with three grid items. The first one works as a headline, with some text. No issue there. The other two are supposed to be menues of equal height and width. They work fine -- as long as I don't add any content in. When I try add simple text into the left one, it gets extremely wide for no apparent reason. Could someone please tell me why this happens, and how to fix it? Below is the entire code. Cheers! //F CODE <style> .grid_grund { background-color:rgba(25,133,136,0.9); display: grid; box-sizing: border-box; padding:25px; grid-gap: 25px; max-width:90%; max-height:70%; margin-left:auto; margin-right:auto; margin-top:100px; border-radius:25px; grid-template-columns: repeat(8, auto); grid-template-rows: repeat(8, 50px); } .item1 { grid-column: 1 / span 8; grid-row: 1 / span 1; text-align:center; font-family: "Verdana"; font-size: 36px; font-style: normal; font-weight: bold; color:white; text-shadow:-2px -2px 0px #064D4F,0px -2px 0px #064D4F,2px -2px 0px #064D4F,-2px 0px 0px #064D4F,0px 0px 0px #064D4F,-2px 2px 0px #064D4F,0px 2px 0px #064D4F,2px 2px 0px #064D4F; } .item2 { grid-column: 1 / span 4; grid-row: 2 / span 5; } .item3 { grid-column: 5 / span 4; grid-row: 2 / span 5; } .itembox { margin:0; padding:0; display:block; box-sizing: border-box; width:100%; height:100%; border-radius: 25px 25px 0 0; background-color:rgba(3,77,80,0.7); } .itemheadline { color: #034D4C; text-align:center; font-family: "Verdana"; font-size: 36px; font-style: normal; font-weight: bold; margin:0; width:100%; height:45px; display:block; box-sizing: border-box; border-radius: 25px 25px 0 0; background-color:rgba(63,186,191,0.8); } </style> <span class="grid_grund"> <span class="item1">Some text goes here</span> <span class="item2"> <span class="itembox"> <span class="itemheadline">Headline</span> Lorem ipsum dolor sit amet, te velit munere qui. Vix salutatus torquatos id, </span> </span> <span class="item3"> <span class="itembox"> <span class="itemheadline">Headline</span> </span> </span> </span> |
Lo-Fi Version | Time is now: 26th April 2024 - 07:59 PM |