Question

第一次尝试使用css网格模板区域，它根本不工作。它没有放在第一行，然后尝试将第二行中的所有内容都塞在彼此的顶部。我感谢任何帮助。谢谢。我使用的是铬62。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Signature Urgent Care</title>
<link rel="stylesheet" href="main.css">
</head>
<body>

<div class="grid">
<header>
  <img src="signatureLogo.png">
  <img src="arrow-header.png">
  <div class="address-hours">
    <p>120 2nd Street South<br>St. Petersburg, FL 33701</p>
    <p>Mon-Fri 8 AM-8 PM<br>Sat-Sun 9 AM-4 PM</p>
  </div>
  <div>
    <p>Call</p>
    <p>1.727.851.9993</p>
    <p><a href="#">Click Here for Directions</a></p>
  </div>
</header>

<nav>
  <ul>
    <li><a>Home</a></li>
    <li><a>About Us</a></li>
    <li><a>Services</a></li>
    <li><a>Insurance / Forms</a></li>
    <li><a>Location &amp Hours</a></li>
  </ul>
</nav>

<div class="home-image">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/13.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/11.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/12.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/7.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/6.png">
</div>

<div class="explain">
  <img src="arrow-body.png">
  <p>Signature Urgent Care clinic is your best option if you are looking for urgent care centers or clinics in downtown Saint Petersburg, FL 33701, 33704 or 33705 area. 
  Signature Urgent Care is a walk-in medical clinic (health clinic) in downtown Stpete where no appointments are needed and you can be seen by a doctor fast.
  Signature Urgent Care is open seven days a week including weekends, after hours and holidays.</p>
  <p>Most insurances are accepted. No insurance, No problem! We offer $75 doctor's visit and best cash prices.
  Signature Urgent Care offers DOT physicals, Labs, IV fluids, Xrays, TB skin testing, drug screens and Workman's Comp services also. We treat accident
  and injury patients including motor vehicle accident patients. Call us today or just walk in and experience the difference convenience and quality makes!</p>
</div>

<section class="picture-summary">
  <a href="#"><div class="about-pic">
    <h2>ABOUT US</h2>
    <img src="aboutBTN.png">
    <ul>
      <li>Meet the doctor</li>
      <li>Tour our clinic</li>
      <li>Join our team</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div></a>

  <a href="#"><div class="patient-services-pic">
    <h2>PATIENT SERVICES</h2>
    <img src="patientBTN.png">
    <ul>
      <li>Cough/cold/strep/flu</li>
      <li>Aches and Pains</li>
      <li>Physicals and vaccinations</li>
      <li>Xray, EKGs, Labs and more</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div></a>

  <a href="#"><div class="insurance-pic">
    <h2>INSURANCE/FORMS</h2>
    <img src="insuranceBTN.png">
    <ul>
      <li>Insurances accepted</li>
      <li>Patient forms</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div>
  </a>

</section>

<footer>
<div class="hours">
  <h2>Our Hours</h2>
  <p>Mon-Fri 8 AM-8 PM<br>Sat-Sun 9 AM-4 PM</p>
  <p>Phone: 727-851-9993<br>Fax: 727-851-9992</p>
  <a href="https://www.facebook.com/SignatureUC/?ref=page_internal"><img src="facebook.png"></a>
  <a href="https://twitter.com/SignatureUC"><img src="twitter.png"></a>
  <a href="https://plus.google.com/106387525484792113281"><img src="google.png"></a>
</div>
<div class="Address">
  <h2>Address</h2>
  <p>120 2nd Street South<br>St. Petersburg, FL 33701</p>
  <p>We provide urgent care services on a walk-in basis to: St. Petersburg, 
  Old Northeast, Kenwood, Gulfport, St.Pete Beach, Lealman, Pinellas Park, 
  Harbor Bluffs, Belleair Bluffs, Treasure Island,
  Madeira Beach, North Redington Beach, Kenneth City, Bay Pines, Indian Shores, Largo.</p>
</div>
<div class="Parking">
  <h2>Parking</h2>
  <p>Parking is validated. Parking is conveniently located right across the street at
  the Rowdies’ Garage, previously called New McNulty Garage (101 2nd St S, St Petersburg)
  or the SouthCore Parking Garage (100 1st Avenue South). Park and bring the ticket with you.
  Signature Urgent Care will give you a voucher for parking if you are seen in 
  the clinic. Street parking is available right in front of the clinic.</p>
</div>

</footer>
<section class="copy">
  <p>&copy 2015 Signature Urgent Care. All Rights Reserved</p>
</section>

</div>
</body>
</html>

这是css。 Stack不会让我发布这个，因为它说它主要是代码，但不知道还能说些什么。

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"header header header header header"
"nav nav nav nav nav nav"
"home home home home home"
"ex ex ex ex ex ex"
"sum sum sum sum sum"
"foot foot foot foot foot"
"copy copy copy copy copy";

 }

header {
 grid-area: header; 
}

nav {
grid-area: nav; 
}

.home-image {
grid-area: home;
} 

.explain {
grid-area: ex;
}

.picture-summary {
grid-area: sum;
}

footer {
grid-area: foot;
}

.copy {
grid-area: copy;
}

Answer 1

确保每行中的网格区域单元格与列声明匹配。已经声明了五列，但是在nav行和前行的情况下，每个列中当前有六个单元格。单元格需要形成一个矩形，如下所示：

  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    "home home home home home"
    "ex ex ex ex ex"
    "sum sum sum sum sum"
    "foot foot foot foot foot"
    "copy copy copy copy copy";

css网格区域无法正常工作

1 个答案: