The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> css grid column gaps, why its not working
mp3909
post Apr 24 2020, 07:08 AM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
I am learning css grid and somehow my grid column gap is not working.
What am I doing wrong?

CODE
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            #content {
                display: grid;
                grid-template-columns: repeat(12,1fr);
                grid-auto-rows: minmax(100px, auto);
                background-color: rgb(30, 173, 235);
                color: #fff;
                max-width: 960px;
                grid-column-gap: 10px;
                margin: 0 auto;
            }

            #content header {
                grid-column: 1 / 13;
            }

            #content main {
                grid-column: 4 / 13;
            }

        </style>
    </head>
    <body>

        <div id="content">

            <header>Header</header>
            <main>Main</main>
            <section>Section</section>
            <aside>Aside</aside>
            <nav>Nav</nav>
            <footer>Footer</footer>

        </div>

    </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post Apr 24 2020, 07:38 AM
Post #2


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
please ignore my message, I know where I was going wrong.
Had to take out this line of code

background-color: rgb(30, 173, 235);

from the #content{} and instead put it in each of #content main{}, #content header{} etc etc
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:51 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC