The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> grid issue, beginner's level, grid item gets too wide when adding content
seyman
post 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>





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:41 PM