CSS 使用 svg 图像的静态网站上的网格在移动设备上没有响应
CSS Grid on static site that uses svg images is not responsive on mobile
我是 CSS Grid 的新手，我在响应方面遇到了问题。这些列在移动设备上未垂直堆叠。
我正在使用 display:grid 包装 div 称为 "primary-wrapper" 然后 child 元素使用 header、main、aside 和 footer。然后，我用display:flex换grandchildren.
header 有 3 列：#logo、.classic-menu (flexnav) 和 #burger 移动汉堡包装纸。
// JavaScript to refresh when changing orientation
$(window).bind('orientationchange', function (event) {
location.reload(true);
});
.primary-wrapper {grid-template-columns: minmax(200px, 350px) 1fr 1fr; grid-template-rows: 75px 1fr 50px; grid-gap: 20px 30px}
header {grid-area: 1 / 1 / 2 / 4;}
#logo {grid-area: 1 / 1 / 2 / 2;}
.classic-menu {display:flex; justify-content: flex-start}
#burger-wrapper {grid-area: 1 / 3 / 2 / 4;}
main {grid-area: 2 / 1 / 3 / 3; margin-left: 20px;}
aside {grid-area: 2 / 3 / 3 / 4;}
footer {grid-area: 3 / 1 / 4 / 4;}
/* mobile menu */
#menu-burger{right:20px}
.flexnav{padding:0 20px}
.destory{display:none}
#burger-wrapper {width:80px; height:80px; float:right; top:0;right:-25px; display:flex; justify-content:center;align-items:center; cursor:pointer}
.classic-menu #burger-wrapper {display:none}
#menu-burger{width:26px;height:32px;position:relative;margin:0 auto;z-index:20}
#burger-wrapper .touch-button{display:none}
.menu-overlay #menu-burger{display:block}
#menu-burger span {display:block; position:absolute; height:2px;width:100%; background-color:#fff;opacity:1;right:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:background-color .05s ease-in-out,transform .2s ease-in-out,top .2s ease-in-out;transition:background-color .05s ease-in-out,transform .2s ease-in-out,top .2s ease-in-out}
#menu-burger span:nth-child(1){top:7px}
#menu-burger span:nth-child(2){top:15px}
#menu-burger.open span:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:10px}
#menu-burger.open span:nth-child(2){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:10px}
#menu-burger.open span:nth-child(3){display:none}
/*--------- flex nav flexnav ------*/
@media only screen and (min-width: 768px) {
#menu-burger {display:block;position:absolute;right:50px;top:32px}
/*#menu-burger span.touch-button{display:none}*/
#burger-wrapper{right:2px;top:-4px}
.classic-menu #burger-wrapper {display:block}
.flexnav {padding:0 50px;background:transparent;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.flexnav li {text-align:center;list-style-type:none;line-height:6vw;-webkit-transition:color .15s ease-out 0;transition:color .15s ease-out 0}
.nav-height {overflow-y:scroll;position:relative;height:100%;padding:40px 0; padding-right:30px; width:calc(100% + 30px);box-sizing:border-box}
nav {height:100vh;position:fixed;top:70px;left:0;z-index:99;width:100%;box-sizing:border-box;visibility:visible; opacity:0;padding:20px 0;background-color:#0f1010}
nav.open {visibility:visible;pointer-events:initial;opacity:1}
.flexnav {max-height:2000px;-webkit-transition:all .4s ease-in .6s; transition:all .4s ease-in .6s}
.flexnav.flexnav-show {-webkit-transition:all .4s ease-out .2s;transition:all .4s ease-out .2s}
.flexnav:hover li{color:rgba(255,255,255,0.4)}
.flexnav li:hover{color:rgba(255,255,255,1)}
.flexnav .touch-button{width:100%;display:block;height:calc(6vw + 20px)}
.flexnav .touch-button .navicon{display:none}
.flexnav li.link{border-bottom:none}
.flexnav li a{font-weight:700;font-family:'Poppins',sans-serif;font-size:6vw;padding:10px 0;color:#ffffff;display:block}
.flexnav li ul{margin-bottom:20px}
.flexnav li ul:after{display:none}
.flexnav li ul li a{padding:10px 0;font-size:16px;font-weight:500;line-height:20px;border-top:none}
}
@media all and (min-width: 1025px) {
nav {position: fixed; top: 0; left: 30%; display:block; z-index: 999;}
.classic-menu nav {width:auto;text-align:right;height:40px;margin:10px 0;background-color:transparent!important; opacity: 1;}
.classic-menu #burger-wrapper {display: none;}
.flexnav{display:inline-flex;width:auto;max-height:40px}
.flexnav li{color:#fff}
.flexnav li ul{min-width:160px;background-color:rgb(149,237,142)}
.flexnav li > ul li:hover{background-color:rgba(149,237,142,0.7)}
.flexnav .touch-button {background:transparent none repeat scroll 0 0}
.flexnav .touch-button .navicon {display:none}
.flexnav li{background:transparent none repeat scroll 0 0;padding:0 25px;list-style:none}
.menu-timeline{opacity:1}
.flexnav li:first-child{padding-left:0}
.flexnav li:last-child{padding-right:0}
.flexnav li a{background:transparent none repeat scroll 0 0;padding:10px 0 4px;position:relative;border-left:medium none;font-weight:600;font-family:'Poppins',sans-serif;color: rgba(255,255,255,.85);font-size:1.15em;line-height:20px;display:block;overflow:hidden}
.flexnav li.active a{color:#fff}
.flexnav li:hover a{color:#e9078a}
.flexnav li a span {position:relative;display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transform-origin:100% 0}
.flexnav li a span::before{position:absolute;top:100%;width:100%;left:0;content:attr(data-hover)}
.navbar .flexnav .submenu ul{display:none}
.navbar .flexnav .submenu:hover ul{display:block}
.flexnav li:hover a span{-webkit-transform:translateY(-100%);transform:translateY(-100%);transform-origin:0 0}
.flexnav li ul li a{padding:10px 20px;background-color:transparent;font-size:14px;font-family:'Roboto',sans-serif;font-weight:600;text-transform:none;color:#fff!important;-webkit-transition:all .05s ease-in-out;-moz-transition:all .05s ease-in-out;-o-transition:all .05s ease-in-out;-ms-transition:all .05s ease-in-out;transition:all .05s ease-in-out}
.flexnav li ul li a.link::before{display:none}
.flexnav li ul li a.active,.flexnav li ul li a:hover{color:#fff!important}
.flexnav li > ul li{margin-left:0;padding:0;margin-bottom:0}
.flexnav li:first-child ul{left:-15px}
.flexnav li ul ul{left:5px!important}
.flexnav ul li ul li a{background:#000}
.flexnav li ul.flexnav-show{-webkit-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);opacity:1!important;visibility:visible;-webkit-transition:opacity .2s ease-in-out 0.1s,visibility .2s ease-in-out,transform .2s ease-in-out .1s;transition:opacity .2s ease-in-out 0.1s,visibility .2s ease-in-out,transform .2s ease-in-out .1s}
.flexnav .touch-button{display:none}
}
/* home page */
.xl4uhomeBlock h1:before {}
.contactXL4U-hero {vertical-align:middle;}
.contactXL4U-hero .ahhh {font-weight: 600; color: rgba(255,255,255,.85); font-size:48px;line-height:60px}
.contactXL4U-hero .ahhh span {color: #6780e4}
.homeProducts {color: #fff; opacity: 1; font-size: 1.05em; font-weight: 300; line-height: 1.3em; width: 100%;}
button[name="your-project"] {margin: 15px auto; width: 100%;}
@media (min-width: 1024px){
.contactXL4U-hero .ahhh {margin-top: 20%;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>XLDesign4u in Richmond, VA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XLDesign4U description here" />
<meta name="author" content="TriMedia Richmond, VA">
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/style.css" />
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/css/blocks-xl4u.css"/>
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700" rel="stylesheet"></head>
<body>
<div class="grid primary-wrapper">
<!-- Header -->
<header class="grid classic-menu">
<!-- Logo -->
<div id="logo">
<a href="https://trimedia.co/xl4u/index.php">
<img src="https://trimedia.co/xl4u/images/svg/XL-Designs-4U-logo.min.svg" alt="XLDesign4U Logo">
</a>
</div>
<!--/Logo -->
<!-- Navigation -->
<nav class="navbar" >
<ul data-breakpoint="1025" class="flexnav">
<li class="link menu-timeline active submenu"><a class="link" href="https://trimedia.co/xl4u/xldesign-4U.php">Home</a>
</li>
<li class="link menu-timeline"><a class="ajax-link link" data-type="page-transition" href="https://trimedia.co/xl4u/about.php">About</a></li>
<li class="link menu-timeline"><a class="ajax-link link" data-type="page-transition" href="https://trimedia.co/xl4u/contact-xl4u.php">Contact</a></li>
<li class="link menu-timeline"><a class="ajax-link link" href="http://www.sgcontact.com/emails/nhmkizr/index.html" target="_blank" >News</a></li>
<li class="link menu-timeline"><a class="ajax-link link" href="https://www.promoplace.com/xldesign4u/showrooms_001.htm" target="_blank">Client Login</a></li>
</ul>
</nav>
<!--/Navigation -->
<!-- Menu Burger -->
<div id="burger-wrapper">
<button id="menu-burger">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!--/Menu Burger -->
</header>
<!--/Header -->
<main class="xl4uhomeBlock">
<div class="contactXL4U-hero">
<div class="ahhh">Ahhhh! Relax.</div>
<h2>Discover our world of services here for a relaxing carefree experience.</h2>
<p class="homeProducts">With over 300,000 products... we have everything from the unique to the fast value.</p>
<button name="your-project" type="button" id="createAnimation"><a href="#tellus">Tell us about your project.</a></button>
</div>
<a name="tellus"> </a>
<div class="flex contactXL4U">
<div class="box-flex address left">
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<h6>Address goes here</h6>
</div>
<div class="box-flex email left">
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<h6><a href="mailto:xxx@xxx.org&subject=Inquiry%20from%20XL4U website&bcc=bcc@xxx@trimedia.co">E-mail XLDesign4U</a></h6>
</div>
<div class="box-flex fax">
<i class="fa fa-fax fa-2x" aria-hidden="true"></i>
<h6>Fax xxx.xxx.xxxx</h6>
</div>
<div class="box-flex call">
<i class="fa fa-fax fa-2x" aria-hidden="true"></i>
<h6><a href="tel:xxx-xxx-xxxx">Call xxx.xxx.xxxx</a></h6>
</div>
<button name="messageXL4u" type="button"><a href="#maincontactForm" id="onlineContactForm">Online Contact Form</a></button>
<a name="maincontactForm"> </a>
<!-- Contact Form -->
<div id="contact-formWrap">
<div id="message"> </div>
<i class="fa fa-edit fa-2x" aria-hidden="true"></i>
<h6>Send us a message</h6>
<form method="post" action="contact.php" name="contactform" id="contactform">
<div class="name-box">
<input name="name" type="text" id="name" size="30" onfocus="if(this.value == 'Full Name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Full Name'; }" value="Full Name" ><label class="input_label">What's Your Name?</label>
</div>
<div class="email-box">
<input name="email" type="text" id="email" size="30" onfocus="if(this.value == 'E-mail') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'E-mail'; }" value="E-mail" >E-mail Address<label class="input_label"></label>
</div>
<div class="message-box">
<textarea name="comments" cols="40" rows="4" id="comments" onfocus="if(this.value == 'Your Message') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Your Message'; }" >Your Message</textarea><label class="input_label slow"></label>
</div>
<div class="submit-box">
<input type="submit" class="send_message clapat-button outline link" id="submit" value="Submit" />
</div>
</form>
</div></div>
</main>
<aside>
<div class="flower-wrapper">
<img src="https://trimedia.co/xl4u/images/svg/hibiscus-Small.svg" alt="Hibiscus Flower">
</div>
</div> </aside>
<footer>
<div class="socials-wrap">
<div class="socials-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></div>
<div class="socials-text">Social Media & Legal</div>
<ul class="socials">
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.facebook.com/XLDesign4U" target="_blank">Fb</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.linkedin.com/in/xldesign4u/" target="_blank">In</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://twitter.com/XLDesignLori" target="_blank">Tw</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.pinterest.com/xl4u/xldesign4u/" target="_blank">Pn</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element copyright-icon" href="#copyright" target="_blank">©</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element privacy-icon" href="#privacy-policy">Le</a></span></li>
</ul>
</div>
<div class="copyright-xl4u hidden"><a name="copyright"></a>Copyright XLDesign4U, 2020. All rights reserved.</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-migrate-3.3.1.min.js"
integrity="sha256-APllMc0V4lf/Rb5Cz4idWUCYlBDG3b0EcN1Ushd3hpE="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
<script src="https://trimedia.co/xl4u/js/contact-form.js"></script>
<script src="https://trimedia.co/xl4u/js/xl4u.js"></script>
<script src="https://trimedia.co/xl4u/gsap-animations.js"></script>
</body>
</html>
问题的解决方法很简单，您应该指定正确的 area 元素应该显示的位置，如下所示：
grid-area: 3 / 1 / 4 / 4;
至于心态，请记住，当您使用 CSS Grid 时，您是在双向工作 vertical 和 horizontal 或 columns 和 rows 就像 CSS Grid 规范。像 CSS Grid reference and this excellent Scrimba course 一样，有很多学习 CSS Grid 的好资源。快乐黑客！
我是 CSS Grid 的新手，我在响应方面遇到了问题。这些列在移动设备上未垂直堆叠。
我正在使用 display:grid 包装 div 称为 "primary-wrapper" 然后 child 元素使用 header、main、aside 和 footer。然后，我用display:flex换grandchildren.
header 有 3 列：#logo、.classic-menu (flexnav) 和 #burger 移动汉堡包装纸。
// JavaScript to refresh when changing orientation
$(window).bind('orientationchange', function (event) {
location.reload(true);
});
.primary-wrapper {grid-template-columns: minmax(200px, 350px) 1fr 1fr; grid-template-rows: 75px 1fr 50px; grid-gap: 20px 30px}
header {grid-area: 1 / 1 / 2 / 4;}
#logo {grid-area: 1 / 1 / 2 / 2;}
.classic-menu {display:flex; justify-content: flex-start}
#burger-wrapper {grid-area: 1 / 3 / 2 / 4;}
main {grid-area: 2 / 1 / 3 / 3; margin-left: 20px;}
aside {grid-area: 2 / 3 / 3 / 4;}
footer {grid-area: 3 / 1 / 4 / 4;}
/* mobile menu */
#menu-burger{right:20px}
.flexnav{padding:0 20px}
.destory{display:none}
#burger-wrapper {width:80px; height:80px; float:right; top:0;right:-25px; display:flex; justify-content:center;align-items:center; cursor:pointer}
.classic-menu #burger-wrapper {display:none}
#menu-burger{width:26px;height:32px;position:relative;margin:0 auto;z-index:20}
#burger-wrapper .touch-button{display:none}
.menu-overlay #menu-burger{display:block}
#menu-burger span {display:block; position:absolute; height:2px;width:100%; background-color:#fff;opacity:1;right:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:background-color .05s ease-in-out,transform .2s ease-in-out,top .2s ease-in-out;transition:background-color .05s ease-in-out,transform .2s ease-in-out,top .2s ease-in-out}
#menu-burger span:nth-child(1){top:7px}
#menu-burger span:nth-child(2){top:15px}
#menu-burger.open span:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:10px}
#menu-burger.open span:nth-child(2){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:10px}
#menu-burger.open span:nth-child(3){display:none}
/*--------- flex nav flexnav ------*/
@media only screen and (min-width: 768px) {
#menu-burger {display:block;position:absolute;right:50px;top:32px}
/*#menu-burger span.touch-button{display:none}*/
#burger-wrapper{right:2px;top:-4px}
.classic-menu #burger-wrapper {display:block}
.flexnav {padding:0 50px;background:transparent;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.flexnav li {text-align:center;list-style-type:none;line-height:6vw;-webkit-transition:color .15s ease-out 0;transition:color .15s ease-out 0}
.nav-height {overflow-y:scroll;position:relative;height:100%;padding:40px 0; padding-right:30px; width:calc(100% + 30px);box-sizing:border-box}
nav {height:100vh;position:fixed;top:70px;left:0;z-index:99;width:100%;box-sizing:border-box;visibility:visible; opacity:0;padding:20px 0;background-color:#0f1010}
nav.open {visibility:visible;pointer-events:initial;opacity:1}
.flexnav {max-height:2000px;-webkit-transition:all .4s ease-in .6s; transition:all .4s ease-in .6s}
.flexnav.flexnav-show {-webkit-transition:all .4s ease-out .2s;transition:all .4s ease-out .2s}
.flexnav:hover li{color:rgba(255,255,255,0.4)}
.flexnav li:hover{color:rgba(255,255,255,1)}
.flexnav .touch-button{width:100%;display:block;height:calc(6vw + 20px)}
.flexnav .touch-button .navicon{display:none}
.flexnav li.link{border-bottom:none}
.flexnav li a{font-weight:700;font-family:'Poppins',sans-serif;font-size:6vw;padding:10px 0;color:#ffffff;display:block}
.flexnav li ul{margin-bottom:20px}
.flexnav li ul:after{display:none}
.flexnav li ul li a{padding:10px 0;font-size:16px;font-weight:500;line-height:20px;border-top:none}
}
@media all and (min-width: 1025px) {
nav {position: fixed; top: 0; left: 30%; display:block; z-index: 999;}
.classic-menu nav {width:auto;text-align:right;height:40px;margin:10px 0;background-color:transparent!important; opacity: 1;}
.classic-menu #burger-wrapper {display: none;}
.flexnav{display:inline-flex;width:auto;max-height:40px}
.flexnav li{color:#fff}
.flexnav li ul{min-width:160px;background-color:rgb(149,237,142)}
.flexnav li > ul li:hover{background-color:rgba(149,237,142,0.7)}
.flexnav .touch-button {background:transparent none repeat scroll 0 0}
.flexnav .touch-button .navicon {display:none}
.flexnav li{background:transparent none repeat scroll 0 0;padding:0 25px;list-style:none}
.menu-timeline{opacity:1}
.flexnav li:first-child{padding-left:0}
.flexnav li:last-child{padding-right:0}
.flexnav li a{background:transparent none repeat scroll 0 0;padding:10px 0 4px;position:relative;border-left:medium none;font-weight:600;font-family:'Poppins',sans-serif;color: rgba(255,255,255,.85);font-size:1.15em;line-height:20px;display:block;overflow:hidden}
.flexnav li.active a{color:#fff}
.flexnav li:hover a{color:#e9078a}
.flexnav li a span {position:relative;display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transform-origin:100% 0}
.flexnav li a span::before{position:absolute;top:100%;width:100%;left:0;content:attr(data-hover)}
.navbar .flexnav .submenu ul{display:none}
.navbar .flexnav .submenu:hover ul{display:block}
.flexnav li:hover a span{-webkit-transform:translateY(-100%);transform:translateY(-100%);transform-origin:0 0}
.flexnav li ul li a{padding:10px 20px;background-color:transparent;font-size:14px;font-family:'Roboto',sans-serif;font-weight:600;text-transform:none;color:#fff!important;-webkit-transition:all .05s ease-in-out;-moz-transition:all .05s ease-in-out;-o-transition:all .05s ease-in-out;-ms-transition:all .05s ease-in-out;transition:all .05s ease-in-out}
.flexnav li ul li a.link::before{display:none}
.flexnav li ul li a.active,.flexnav li ul li a:hover{color:#fff!important}
.flexnav li > ul li{margin-left:0;padding:0;margin-bottom:0}
.flexnav li:first-child ul{left:-15px}
.flexnav li ul ul{left:5px!important}
.flexnav ul li ul li a{background:#000}
.flexnav li ul.flexnav-show{-webkit-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);opacity:1!important;visibility:visible;-webkit-transition:opacity .2s ease-in-out 0.1s,visibility .2s ease-in-out,transform .2s ease-in-out .1s;transition:opacity .2s ease-in-out 0.1s,visibility .2s ease-in-out,transform .2s ease-in-out .1s}
.flexnav .touch-button{display:none}
}
/* home page */
.xl4uhomeBlock h1:before {}
.contactXL4U-hero {vertical-align:middle;}
.contactXL4U-hero .ahhh {font-weight: 600; color: rgba(255,255,255,.85); font-size:48px;line-height:60px}
.contactXL4U-hero .ahhh span {color: #6780e4}
.homeProducts {color: #fff; opacity: 1; font-size: 1.05em; font-weight: 300; line-height: 1.3em; width: 100%;}
button[name="your-project"] {margin: 15px auto; width: 100%;}
@media (min-width: 1024px){
.contactXL4U-hero .ahhh {margin-top: 20%;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>XLDesign4u in Richmond, VA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XLDesign4U description here" />
<meta name="author" content="TriMedia Richmond, VA">
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/style.css" />
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/css/blocks-xl4u.css"/>
<link rel="stylesheet" type="text/css" href="https://trimedia.co/xl4u/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700" rel="stylesheet"></head>
<body>
<div class="grid primary-wrapper">
<!-- Header -->
<header class="grid classic-menu">
<!-- Logo -->
<div id="logo">
<a href="https://trimedia.co/xl4u/index.php">
<img src="https://trimedia.co/xl4u/images/svg/XL-Designs-4U-logo.min.svg" alt="XLDesign4U Logo">
</a>
</div>
<!--/Logo -->
<!-- Navigation -->
<nav class="navbar" >
<ul data-breakpoint="1025" class="flexnav">
<li class="link menu-timeline active submenu"><a class="link" href="https://trimedia.co/xl4u/xldesign-4U.php">Home</a>
</li>
<li class="link menu-timeline"><a class="ajax-link link" data-type="page-transition" href="https://trimedia.co/xl4u/about.php">About</a></li>
<li class="link menu-timeline"><a class="ajax-link link" data-type="page-transition" href="https://trimedia.co/xl4u/contact-xl4u.php">Contact</a></li>
<li class="link menu-timeline"><a class="ajax-link link" href="http://www.sgcontact.com/emails/nhmkizr/index.html" target="_blank" >News</a></li>
<li class="link menu-timeline"><a class="ajax-link link" href="https://www.promoplace.com/xldesign4u/showrooms_001.htm" target="_blank">Client Login</a></li>
</ul>
</nav>
<!--/Navigation -->
<!-- Menu Burger -->
<div id="burger-wrapper">
<button id="menu-burger">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!--/Menu Burger -->
</header>
<!--/Header -->
<main class="xl4uhomeBlock">
<div class="contactXL4U-hero">
<div class="ahhh">Ahhhh! Relax.</div>
<h2>Discover our world of services here for a relaxing carefree experience.</h2>
<p class="homeProducts">With over 300,000 products... we have everything from the unique to the fast value.</p>
<button name="your-project" type="button" id="createAnimation"><a href="#tellus">Tell us about your project.</a></button>
</div>
<a name="tellus"> </a>
<div class="flex contactXL4U">
<div class="box-flex address left">
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<h6>Address goes here</h6>
</div>
<div class="box-flex email left">
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<h6><a href="mailto:xxx@xxx.org&subject=Inquiry%20from%20XL4U website&bcc=bcc@xxx@trimedia.co">E-mail XLDesign4U</a></h6>
</div>
<div class="box-flex fax">
<i class="fa fa-fax fa-2x" aria-hidden="true"></i>
<h6>Fax xxx.xxx.xxxx</h6>
</div>
<div class="box-flex call">
<i class="fa fa-fax fa-2x" aria-hidden="true"></i>
<h6><a href="tel:xxx-xxx-xxxx">Call xxx.xxx.xxxx</a></h6>
</div>
<button name="messageXL4u" type="button"><a href="#maincontactForm" id="onlineContactForm">Online Contact Form</a></button>
<a name="maincontactForm"> </a>
<!-- Contact Form -->
<div id="contact-formWrap">
<div id="message"> </div>
<i class="fa fa-edit fa-2x" aria-hidden="true"></i>
<h6>Send us a message</h6>
<form method="post" action="contact.php" name="contactform" id="contactform">
<div class="name-box">
<input name="name" type="text" id="name" size="30" onfocus="if(this.value == 'Full Name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Full Name'; }" value="Full Name" ><label class="input_label">What's Your Name?</label>
</div>
<div class="email-box">
<input name="email" type="text" id="email" size="30" onfocus="if(this.value == 'E-mail') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'E-mail'; }" value="E-mail" >E-mail Address<label class="input_label"></label>
</div>
<div class="message-box">
<textarea name="comments" cols="40" rows="4" id="comments" onfocus="if(this.value == 'Your Message') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Your Message'; }" >Your Message</textarea><label class="input_label slow"></label>
</div>
<div class="submit-box">
<input type="submit" class="send_message clapat-button outline link" id="submit" value="Submit" />
</div>
</form>
</div></div>
</main>
<aside>
<div class="flower-wrapper">
<img src="https://trimedia.co/xl4u/images/svg/hibiscus-Small.svg" alt="Hibiscus Flower">
</div>
</div> </aside>
<footer>
<div class="socials-wrap">
<div class="socials-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></div>
<div class="socials-text">Social Media & Legal</div>
<ul class="socials">
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.facebook.com/XLDesign4U" target="_blank">Fb</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.linkedin.com/in/xldesign4u/" target="_blank">In</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://twitter.com/XLDesignLori" target="_blank">Tw</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element" href="https://www.pinterest.com/xl4u/xldesign4u/" target="_blank">Pn</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element copyright-icon" href="#copyright" target="_blank">©</a></span></li>
<li><span class="parallax-wrap"><a class="parallax-element privacy-icon" href="#privacy-policy">Le</a></span></li>
</ul>
</div>
<div class="copyright-xl4u hidden"><a name="copyright"></a>Copyright XLDesign4U, 2020. All rights reserved.</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-migrate-3.3.1.min.js"
integrity="sha256-APllMc0V4lf/Rb5Cz4idWUCYlBDG3b0EcN1Ushd3hpE="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
<script src="https://trimedia.co/xl4u/js/contact-form.js"></script>
<script src="https://trimedia.co/xl4u/js/xl4u.js"></script>
<script src="https://trimedia.co/xl4u/gsap-animations.js"></script>
</body>
</html>
问题的解决方法很简单，您应该指定正确的 area 元素应该显示的位置，如下所示：
grid-area: 3 / 1 / 4 / 4;
至于心态，请记住，当您使用 CSS Grid 时，您是在双向工作 vertical 和 horizontal 或 columns 和 rows 就像 CSS Grid 规范。像 CSS Grid reference and this excellent Scrimba course 一样，有很多学习 CSS Grid 的好资源。快乐黑客！