Question

正如您从我的代码中看到的那样，我是一名新手网页设计师我学习了CSS网格，并试图在我的网站上实现它。我试图让我的导航栏使用第二和第三个网格列和dsm instagram插件使用下一行下的所有三个网格列。但由于某种原因，导航栏正在使用第二列，插件使用第三列全部在同一行。

＆＃13;

body {
  margin: 0px;
  padding-left: 10%;
  width: 80%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
}

.logo {
  grid-columns: 1/2;
  width: 200px;
}

.main-nav {
  grid-columns: 2/4;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding-top: 20px;
}


/*gets rid of bullet points*/

ul {
  list-style: none;
}

.main-nav li a {
  text-decoration: none;
  all: unset;
  font-family: 'raleway', sans-serif;
  font-size: 1em;
  color: #a08b13;
}

.dsm-instagram-feed {
  grid-columns: 1/3;
  grid-rows: 2/3
}


}
.contact-box {
  border: 3px solid #a08b13;
}

/* Change the link color to #111 (black) on hover */
.contact-box:hover {
  background-color: black;
  color: #ffffff;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">

<div class="grid">
  <div class="logo">
    <a href="hairbychaya.html"><img src="cmc_logo.jpg" class="logo"></img>
    </a>
  </div>
  <nav>
    <ul class="main-nav">

      <li> <a href="hairbychaya.html">HOME</a></li>
      <li> <a href="about.html">ABOUT</a></li>
      <li> <a href="gallery.html">GALLERY</a></li>
      <li> <a href="survices.html">SERVICES</a></li>
      <li> <a href="blog.html">BLOG</a></li>
      <li class="contact-box"> <a href="contact.html">CONTACT</a></li>

    </ul>
  </nav>

  <div class="dsm-instagram-feed" data-embed-id='3818'></div>
  <script src='https://www.displaysocialmedia.com/app/embed/instagram-feed/widget.js'></script>

＆＃13;

Answer 1

您引用grid-columns和grid-rows，但这些不是实际属性。一旦你删除了这四个事件的复数，事情就会起作用。

.logo {
  grid-column: 1/2;
  ...
}

.main-nav {
  grid-column: 2/4;
  ...
}

...

.dsm-instagram-feed {
  grid-column: 1/3;
  grid-row: 2/3
}

小提琴：https://jsfiddle.net/bqu8ton3/

我无法使用我的插件来使用所有树网格列

1 个答案: