所以我对编码还很陌生，出于某种原因，我尝试设置的网格没有正确对齐。当我检查页面时，网格看起来是正确的，有点大但没有错位，但项目在网格内没有正确对齐；一切都排在第一行，没有任何间隔，网格中的最后两个项目相互重叠。另外，我无法让“我是谁”部分的文本居中。页脚和屏幕其余部分之间也有很大的空间，我认为这是由于网格造成的，但我不确定。由于某种原因，我的预加载器没有覆盖整个页面。
我已经尝试了很多我无法跟踪的事情，因此感谢您的帮助。我知道当它检查页面时，“网格区域”属性显示为无效。这是我的代码
HTML：
<!DOCTYPE html><html> <head> <title> Kati Stamato's Portfolio </title> <link href="CSS/styles.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width-divide-width, initial scale=1" charset="UTF-8"> </head> <body> <div class="banner"> <img src="images/logo.png" alt="logo"> <h1 class="career"> UX/UI Designer </h1> </div> <section> <div class="portrait"> <div class="portrait2"></div> <img src="images/Portfolio Portrait 1.png" alt="portrait of Kati Stamato"> </div> <div class="aboutme"> <h2 class="header">About Me</h2> <p1 class="summary"> I am a UX/UI designer looking to work on projects that will help people in need. As someone who has overcome their fair share of hardships, I can overcome any issue and find a unique and effective solution to any problem. I enjoy learning about new things, being creative, and finding new ways to grow. My hobbies include making music and engaging in other creative outlets, enjoying the outdoors, reading, and advocating for mental healthcare. </p1> <br> <a href="https://docs.google.com/presentation/d/1n3XsWx9sv5uBFOzD4geQyjV9z-E8b2y2jIma12w8zt0/edit?usp=sharing" class="linkaboutme"> Learn More About Me </a> </div> </section> <br> <div class="containerGrid"> <div class="whoiskati"> <h2 class="whoami"> Who is Kati? </h2> <p2 class="skills">Skill Set:</p2> <ul class=" lists"> <li>User Experience</li> <li>User Interface</li> <li>Miro and Figma</li> <li>Microsoft Office and Google Suite</li> <li>HTML and CSS</li> </ul> <p3 class="skills">My Traits:</p3> <ul class="lists"> <li>Empathetic</li> <li>Hard-Working</li> <li>Passionate</li> <li>Curious</li> <li>Cooperative</li> <li>Creative</li> <li>Resourceful</li> <li>Determined</li> <li>Good Leadership</li> <li>Unique</li> <li>Aspirational</li> <li>Adaptable</li> </ul> <p4 class="skills">My Passions:</p4> <ul class="lists"> <li>Mental Healthcare</li> <li>Government</li> <li>Creative Arts</li> <li>Social Media</li> <li>Education</li> <li>Charity</li> <li class="italics">And Many More...</li> </ul> </div> <div class="bps"> <div class="bpspreview"> <img src="Images/Project3MobilePrototypePreviewBig.png" alt="preview of BPS project"> </div> <div class="bpsbox"> <h3 class="bpsheader">Bloomington Public Schools</h3> <p5 class="bpsoverview"> We worked on redesigning the BPS site by redesigning the navigation and style to help parents and students access necessary information about their schools. </p5> <br> <a href="https://docs.google.com/presentation/d/1dU5a6XN3Ay2hGy1Cjx6FKhFO6RocsziEEeQKz06vcCY/edit?usp=sharing" class="linkbps"> BPS Project Summary </a> </div> </div> <div class="twloha"> <div class="twlohabox"> <h4 class="twlohaheader">To Write Love On Her Arms</h4> <p6 class="twlohaoverview"> We worked on redesigning the TWLOHA site by redesigning the navigation and making a more consistent color scheme in order to help those with mental health issues have easier access to resources. </p6> <br> <a href="https://docs.google.com/presentation/d/1TZ1a7ygGe_ZI2J7hKgBVuKGqYsq_dihODzzHSxcal2s/edit?usp=sharing" class="linktwloha"> To Write Love On Her Arms Summary </a> <div class="twlohapreview"> <img src="Images/Project4MobilePrototypePreviewBig.png" alt="preview of TWLOHA project"> </div> </div> </div> </div> <footer> <div class="cta"> <button class="button">Email</button> <button class="button">LinkedIn</button> <button class="button">Resume</button> <button class="button">Cover Letter</button> </div> </footer> <p7>Copyright 2023</p7> <div class="preloader"> <div class="childPreloader"></div> <img src="./Images/preloader.png"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/template.js"></script> <script src="js/index.js"></script> </body></html>CSS
* { margin: 0; padding: 0; box-sizing: border-box; height: fit-content; width: fit-content;}body { background: linear-gradient(180deg, #00FFF0 0%, rgba(0, 255, 240, 0) 100%), #FFA800; background-repeat: no-repeat; width: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}.banner { display: flex; justify-content: space-between; width: 100%; padding: 25px;}.career { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-style: italic; font-weight: 700; font-size: 40px; line-height: 48px; text-align: right; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);}.aboutme { direction: flex; justify-content: center; background: #DBFF00; border-radius: 25px; align-content: center; box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25); padding: 20px; text-align: center; margin-left: 100px; margin-right: 100px; width: 50%;}.header{ font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-weight: 700; font-size: 40px; line-height: 48px; text-align: center;}.summary p1{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-weight: 700; font-size: 24px; text-align: center; padding: 50px;}.linkaboutme { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 700; font-size: 24px; line-height: 29px; text-align: center; text-decoration-line: underline; color: #FF00B8;}.portrait { display: flex; justify-content: center; filter: drop-shadow(6px 0px 4px rgba(0, 0, 0, 0.25)); padding-left: 20px; padding-right: 20px;}.portrait2 { display: flex; justify-content: center;}.containerGrid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "whoami bpspreview bpsbox" "whoami twlohabox twlohapreview"; width: 80%; padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom: 5%; height: auto; width: max-content;}.whoiskati { grid-area: "whoami"; box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25); background: #000000; height: fit-content; padding: 50px; text-align: center; width: 300px;}.whoami { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 700; font-size: 32px; line-height: 57px; color: #FFFFFF; padding-bottom: 50px;}.skills { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: bold; font-weight: 600; font-size: 28px; line-height: 38px; color: #FFFFFF; padding: 25px; text-align: center;}.lists { list-style: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; color: #FFFFFF; padding: 25px; text-align: center;}.italics {font-style: italic}.bps { border-radius: 25px; padding: 100px; margin: 25px; display: flex;}.bpsbox { grid-area: "bpsbox"; background: #DBFF00; border-radius: 25px; box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25); padding: 25px; width: 300px; height: 400px; order: 3; text-align: center;}.bpsheader { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: bold; font-weight: 700; font-size: 24px; line-height: 29px; text-align: center; color: #000000;}.bpspreview img{ grid-area: "bpspreview"; border-radius: 40px; filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.25)); height: 400px; order: 2;}.bpsoverview { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #000000;}.linkbps { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 700; font-size: 24px; line-height: 29px; text-align: center; text-decoration-line: underline; color: #FF00B8;}.twloha { border-radius: 25px; padding: 100px; margin: 25px; display: flex;}.twlohabox { grid-area: "twlohabox"; background: #DBFF00; border-radius: 25px; padding: 25px; box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25); width: 300px; height: 400px; order: 4; text-align: center;}.twlohapreview img{ grid-area: "twlohapreview"; filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.25)); border-radius: 40px; order: 5; height: 400px;}.twlohaheader { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: bold; font-weight: 700; font-size: 24px; line-height: 29px; text-align: center; color: #000000;}.twlohaoverview { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #000000;}.linktwloha { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 700; font-size: 24px; line-height: 29px; text-align: center; text-decoration-line: underline; color: #FF00B8;}footer { clear:both;}.cta { display: flex; margin-top: auto; margin: 25px; justify-content: space-around; align-items: flex-end; flex-wrap: wrap; padding: 5%; width: 90%;}.button { background: rgba(3, 254, 237, 0.8); box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25); border-radius: 25px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 20px; font-style: bold; text-align: center; height: 50px; width: 225px;}p7 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-align: right; display: flex; justify-content: flex-end; margin: 25px; margin-bottom: 25px;}.preloader { position: absolute; width: 100vh; height: 100%; z-index: 100000; background-color: #FFA800; top: 0; display: flex; align-items: center; justify-content: center; animation-duration: 5s; pointer-events: none; background-size: contain; animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards;}.preloader img { animation: spin 3s ease; width: 150px;}@keyframes spin { 0% {transform: rotate(0deg);} 50% {transform: rotate(360deg);} 100% {transform: rotate(720deg);}}@keyframes fadeInAnimation { from {opacity: 1;} to {opacity: 0;}}JS
function fade(){ $("preloader").fade("slow"); setTimeout(fade, 1000); setTimeout(fade, 3000);}