Why Grid doesn't work on id selector

Get Help CSS
,
#1

Hello everyone,
I am now using Grid to make a layout of my personal portfolio, but when I use grid-row and grid-column, it only shows changes on header and footer Tag but not on id selector.
Can anyone help me check what the problem is? Thanks a lot!

Here is CSS code:

.grid {
    display: grid;
    grid-template: 5% 20% 25% 30% 15% 5% / repeat(12, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 12;
}

#introduction {
    grid-row: 2 / 3;
    grid-column: 1 / 12;
}

#skills {
    grid-row: 3 / 4;
    grid-column: 1 / 12;
}

#projects {
    grid-row: 4 / 5;
    grid-column: 1 / 12;
}

#contact {
    grid-row: 5 / 6;
    grid-column: 1 / 12;
}

footer {
    grid-row: 6 / span 1;
    grid-column: 1 / 12;
}
Here is my  HTML code inside body tag:

<body>
        <div class="grid">
            <header>
                <div id="head">
                    <h3>Sandy Lee</h3>
                    <nav id="navi">
                            <span><a href="#introduction">ABOUT ME</a></span>
                            <span><a href="#skills">SKIILS</a></span>
                            <span><a href="#projects">PROJECTS</a></span>
                            <span><a href="#contact">CONTACT ME</a></span>
                    </nav>
                </div>
            </header>
            <main>
                <div id="introduction">
                    <div id="myPhoto">
                        <img src="resources/images/myphoto.png">
                    </div>
                    <div id="introText">
                        <h2>HELLO!</h2>
                        <h1>My name is Sandy Lee, I am a <span>front-end</span> developer.</h1>
                        <p>introduce myself</p>
                        <button>Contact me!</button>
                    </div>
                </div>
                <div id="skills">
                    <h2>SKILLS</h2>
                    <div class="skills-container">
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                        <div class="skill">
                            <div class="skill-icon">
                                <h3>HTML</h3>
                                <img>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos architecto vitae eligendi pariatur aperiam aut.</p>
                        </div>
                    </div>
                </div>
                <div id="projects">
                    <div class="projects-container">
                        <div class="project">
                            <img>
                            <h3>PROJECT1</h3>
                        </div>
                        <div class="project">
                            <img>
                            <h3>PROJECT2</h3>
                        </div>
                        <div class="project">
                            <img>
                            <h3>PROJECT3</h3>
                        </div>
                        <div class="project">
                            <img>
                            <h3>PROJECT3</h3>
                        </div>
                    </div>
                    <h2>PROJECTS</h2>
                </div>
                <div id="contact">
                    <img>
                    <div class="contact-container">
                        <div class="contact-box">
                            <h2>CONTACT ME!</h2>
                            <form>
                                <input name="name" value="Name" required>
                                <input name="tel" value="0912345678">
                                <input name="e-mail" value="xxx@mail.com" required>
                                <input class="submit-button" type="submit" value="submit">
                            </form>
                            <div class="social-media">
                                <img>
                                <img>
                                <img>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <footer>
                <p>© 2021 Sandy Lee</p>
            </footer>
        </div>
    </body>

and also a screen shot from my website

image
image2048×1152 320 KB

#2

Hi @sandy7052201264
it doesn’t have anything to do whether you apply it to a class or an id. Your element #introduction (that’s the element you mean, right?) is wrapped in a <div class='main'>. Your grid is applied to the header .main and footer.

#3

Hello @mirja_t ,
thanks for your answer,
but my <div id="introduction"></div> is wrapped in <main></main> tag,
and my <header></header>, <main></main> and <footer></footer> tags are all inside <div class="grid"></div>
so I still don’t know why <div id="introduction"></div> and other div tags with id such as skills, projects don’t follow the grid rules. :hushed:

#4

What do you expect your website to look like? The grid rules can only apply to the direct children.

#5

Oh, that’s why! thank you so much.
I want to make my site like this.
https://preview.uxpin.com/9483d65d4daf14efd9d185e73f43376b288e6dc6#/pages/136108376
Do you have any suggetions for finishing my layout like this.

#6

I don’t think that this layout is a good case for a css grid. What did you build it with? I don’t know what builder or cms uses ui-view.
I think I would build this kind of design with flex boxes inside each parent row element. I would use a grid system simalar to bootstrap’s:

#7

It’s a programm called UXpin for making wireframe, which is also recommended from Codecademy course.
Thanks for your suggestion, I will try that!

#8

Ah ok thank you, didn’t know that tool.