Question

嗨，我的代码似乎有问题，但是我不知道这可能是什么。所以我想完成的是这种格式：

图像空

公司产品

资源扩展

很显然，我用3行2列的正确方法，但它似乎是3行4列，无法实现！感谢您的帮助！

代码是在SCSS上制作的，因此代码段无法正常工作，这是代码笔：

footer {
  width: 100%;
  height: auto;
  ul {
    list-style: none;
    border: 1px solid black;
    background: gray;
    li {
      font-weight: 300;
      color: #5b5e6dcc;
    }
    li:first-child {
      font-weight: bolder;
      color: #565657;
    }
  }
  div:nth-child(1) {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-areas: "img   ." "company product" "resources extras";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    justify-content: center;
    background: green;
    img {
      width: 155px;
      height: 155px;
      grid-area: img;
      margin-left: 0.3rem;
    }
    ul:nth-of-type(2) {
      grid-area: company;
    }
    ul:nth-of-type(3) {
      grid-area: product;
    }
    ul:nth-of-type(4) {
      grid-area: resouces;
    }
    ul:nth-of-type(5) {
      grid-area: extras;
    }
  }
}

<nav>
  <img src="./images/slack-logo.png" alt="slack_logo" />
  <ul>
    <li>Why Slack?</li>
    <li>Pricing</li>
    <li>About Us</li>
    <li>Your Workspaces</li>
  </ul>
  <i class="fas fa-bars"></i>

</nav>

<footer>
  <div>
    <img src="https://static.techspot.com/images2/downloads/topdownload/2015/09/slack.png" alt="" />
    <ul>
      <li>COMPANY</li>
      <li>About Us</li>
      <li>Careers</li>
      <li>Blog</li>
      <li>Press</li>
      <li>Brand Guidelines</li>
    </ul>
    <ul>
      <li>PRODUCT</li>
      <li>Why Slack?</li>
      <li>Enterprise</li>
      <li>Customer Stories</li>
      <li>Pricing</li>
      <li>Security</li>
    </ul>
    <ul>
      <li>RESOURCES</li>
      <li>Download</li>
      <li>Help Center</li>
      <li>Guides</li>
      <li>Events</li>
      <li>App Directory</li>
      <li>API</li>
    </ul>
    <ul>
      <li>EXTRAS</li>
      <li>Podcast</li>
      <li>Slack Shop</li>
      <li>Slack at Work</li>
      <li>Slack Fund</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Status</li>
      <li>Privacy & Terms</li>
      <li>Contact Us</li>
    </ul>
    <div>
      <img src="./images/us-flag.png" alt="" />
      <span>English (US)</span>
      <i class="fas fa-chevron-down"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-facebook-f"></i>
      <i class="fab fa-youtube"></i>
    </div>
  </div>
</footer>

Answer 1

再现您的代码...将SCSS转换为CSS，我得到了：

如您所见，您确实有3列和4行：

问题是这样的：

footer div:nth-child(1) ul:nth-of-type(3) {
    grid-area: resouces;
}

修正拼写错误（网格区域：资源； ），然后使它生效：

CSS网格模板区域无法正常工作

1 个答案: