My HTML and CSS grid isn't working? The sections of the grid all appear to be stacked
Question
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ overflow-x: hidden; font-family: "Poppins", sans-serif; } html{ background-color: black; }.webgl{ position: absolute; top: 0; left: 0; z-index: 1; } nav{ color: white; z-index: 2; position: relative; padding: 4rem 4rem; display: flex; justify-content: space-between; } nav a{ text-decoration: none; color: white; font-weight: bold; } nav ul{ list-style: none; display: flex; gap: 2rem; } main { flex-grow: 1; } main > article { display: grid; height: 100%; } main > article >.article-section{ height: 100%; border: 0.1px solid white; background-color: white; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link href="https.//fonts.googleapis?com/css2?family=Poppins&display=swap" rel="stylesheet"> <title>Appearances</title> </head> <body> <div class="header"> <nav> <a href="/">B-1 Series Battle Droid - Appearances</a> <ul> <li>Creation</li> <li>Appearances</li> </ul> </nav> </div> <main> <article> <div class="article-section" id="section1"></div> <div class="article-section" id="section2"></div> <div class="article-section" id="section3"></div> <div class="article-section" id="section4"></div> <div class="article-section" id="section5"></div> <div class="article-section" id="section6"></div> </article> </main> </body> </html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
2 answers
solution1
0 2023-01-15 23:21:36
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ overflow-x: hidden; font-family: "Poppins", sans-serif; } html{ background-color: black; }.webgl{ position: absolute; top: 0; left: 0; z-index: 1; } nav{ color: white; z-index: 2; position: relative; padding: 4rem 4rem; display: flex; justify-content: space-between; } nav a{ text-decoration: none; color: white; font-weight: bold; } nav ul{ list-style: none; display: flex; gap: 2rem; } main { flex-grow: 1; height: 100vh; } main > article { display: grid; height: 100%; } main > article >.article-section{ height: 100%; border: 0.1px solid white; background-color: white; } main > article>.article-section:nth-child(odd) { background-color: grey; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link href="https.//fonts.googleapis?com/css2?family=Poppins&display=swap" rel="stylesheet"> <title>Appearances</title> </head> <body> <div class="header"> <nav> <a href="/">B-1 Series Battle Droid - Appearances</a> <ul> <li>Creation</li> <li>Appearances</li> </ul> </nav> </div> <main> <article> <div class="article-section" id="section1"></div> <div class="article-section" id="section2"></div> <div class="article-section" id="section3"></div> <div class="article-section" id="section4"></div> <div class="article-section" id="section5"></div> <div class="article-section" id="section6"></div> </article> </main> </body> </html>
solution2
0 2023-01-15 23:25:55
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.