0

我是网络开发的新手。

几个月前我开始创建一个投资组合网站，但我休息了 2 个月，现在我正试图再次进入它，并将我的投资组合项目以桌面大小彼此相邻，但由于某种原因，它没有不工作...

我试图通过搜索一些 StackOverflow 帖子来解决这个问题，但到目前为止没有任何效果。很确定这是我忽略的东西，但是是的，这是学习过程带来的，哈哈。

井喷的图像

网格

/*
    ========================
    INNTER GRID STYLES
    ========================
 */

.inner-grid {
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "portfolio-nav" "portfolio-item";
}

#portfolio-nav {
  grid-area: "portfolio-nav";
  border-top: 1px solid #0000001e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-nav-style {
  font-size: 0.9rem;
}


/*
    ========================
    PORTFOLIO ITEM STYLES
    ========================
    */

.portfolio-item {
  grid-area: "portfolio-item";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin: 2px 5px;
}

#portfolio-item-1 {
  margin-top: 0px;
  background-color: #4B9A6D;
}

#portfolio-item-2 {
  background-color: #7541C8;
}

.portfolio-item h4 {
  font-weight: 300;
  font-size: 1.5rem;
  padding-top: 50px;
  padding-bottom: 30px;
  color: #ffff;
}

.portfolio-item p {
  font-weight: 100;
  color: rgba(255, 255, 255, 0.904);
}

.portfolio-item img {
  max-width: 100%;
  min-height: auto;
  margin-top: 17px;
}

.portfolio-item h4,
p {
  padding-left: 25px;
  padding-right: 25px;
}

#view-project {
  color: #ffff;
  padding-top: 25px;
  cursor: pointer;
}

#view-project:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .inner-grid {
    display: grid;
    flex-direction: column;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item portfolio-item";
  }
  .portfolio-item {
    grid-area: "portfolio-item";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<div class="inner-grid">
  <div id="portfolio-nav">
    <nav id="main-header-nav-style">
      <a href="#" class="portfolio-nav-style">Portfolio</a>
      <a href="#" class="portfolio-nav-style">Learning</a>
    </nav>
  </div>

  <div id="portfolio-item-1" class="portfolio-item">
    <h4>Learning CSS Grid</h4>
    <p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup2.png" alt="">
  </div>

  <div id="portfolio-item-2" class="portfolio-item">
    <h4>Learning Flexbox</h4>
    <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

我希望有一个人可以帮助我！

4

3 回答 3

0

来自评论

grid-area: "portfolio-item";应该是grid-area: portfolio-item;，那么网格template-columns: 1fr; grid-template-areas: "portfolio-nav" "portfolio-item";集只有 1 列。尝试修复所有这些，错字和 2 列网格；) –</p>

仅在需要时才可以使用网格区域的可能修复

/*
    ========================
    INNTER GRID STYLES
    ========================
 */

.inner-grid {
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "portfolio-nav" "portfolio-item";
}

#portfolio-nav {
  border-top: 1px solid #0000001e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-nav-style {
  font-size: 0.9rem;
}

/*
    ========================
    PORTFOLIO ITEM STYLES
    ========================
    */

.portfolio-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin: 2px 5px;
}

#portfolio-item-1 {
  margin-top: 0px;
  background-color: #4b9a6d;
}

#portfolio-item-2 {
  background-color: #7541c8;
}

.portfolio-item h4 {
  font-weight: 300;
  font-size: 1.5rem;
  padding-top: 50px;
  padding-bottom: 30px;
  color: #ffff;
}

.portfolio-item p {
  font-weight: 100;
  color: rgba(255, 255, 255, 0.904);
}

.portfolio-item img {
  max-width: 100%;
  min-height: auto;
  margin-top: 17px;
}

.portfolio-item h4,
p {
  padding-left: 25px;
  padding-right: 25px;
}

#view-project {
  color: #ffff;
  padding-top: 25px;
  cursor: pointer;
}

#view-project:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .inner-grid {
    display: grid;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item portfolio-item";
  }

  #portfolio-nav {
    grid-area: portfolio-nav;
  }
  .portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<div class="inner-grid">
  <div id="portfolio-nav">
    <nav id="main-header-nav-style">
      <a href="#" class="portfolio-nav-style">Portfolio</a>
      <a href="#" class="portfolio-nav-style">Learning</a>
    </nav>
  </div>

  <div id="portfolio-item-1" class="portfolio-item">
    <h4>Learning CSS Grid</h4>
    <p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup2.png" alt="">
  </div>

  <div id="portfolio-item-2" class="portfolio-item">
    <h4>Learning Flexbox</h4>
    <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

或重命名网格区域"portfolio-item portfolio-item"以"portfolio-item1 portfolio-item2"将不同的单元格分配给您的不同 ID，否则，它将跨越整个行，彼此堆叠。

于 2021-09-03T19:31:45.193 回答
0

我修改了您的代码，并且网格位置完美

看图片

在此处输入图像描述

我在“inner-grid”中添加了一个 div“行”，其中包含“portfolio-item-1”和“portfolio-item-2”HTML 代码：

<div class="inner-grid">
        <div id="portfolio-nav">
          <nav id="main-header-nav-style">
            <a href="#" class="portfolio-nav-style">Portfolio</a>
            <a href="#" class="portfolio-nav-style">Learning</a>
          </nav>
        </div>

        <div class="row">
            <div id="portfolio-item-1" class="portfolio-item">
                <h4>Learning Flexbox</h4>
                <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
                <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
                <img src="assets/img/lapttop-mobile2.png" alt="">
            </div>

            <div id="portfolio-item-2" class="portfolio-item">
                <h4>Learning CSS Grid</h4>
                <p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
                <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
                <img src="assets/img/lapttop-mobile2.png" alt="">
              </div>
            
            
        </div>
      
        
    </div>

客服代码：

body
{
    margin: 0; /* removing the default body margin */
}

#portfolio-nav {
    grid-area: "portfolio-nav";
    border-top: 1px solid #0000001e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

#portfolio-nav a
{
    text-decoration: none;
    color: gray;
    margin: 10px;
    font-weight: bold;
}

.row
{
    display: grid;
    grid-template-columns: auto auto; 
}

.portfolio-item
{
    padding: 20px;
}

.portfolio-item h4, .portfolio-item p
{
    color: white;
}

.row #portfolio-item-1
{
    background:  #7541C8;
}

.row #portfolio-item-2
{
    background:  #4B9A6D;
}
于 2021-09-03T20:41:21.767 回答
0

nav-item的grid-area属性需要不带双引号的区域名称"。

此外，请确保grid-area每件商品都是独一无二的。

请参阅下面的工作示例：

/*
    ========================
    INNTER GRID STYLES
    ========================
 */

.inner-grid {
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "portfolio-nav" "portfolio-item-1" "portfolio-item-2";
}

#portfolio-nav {
  grid-area: portfolio-nav;
  border-top: 1px solid #0000001e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-nav-style {
  font-size: 0.9rem;
}


/*
    ========================
    PORTFOLIO ITEM STYLES
    ========================
 */

.portfolio-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  /*margin: 2px 5px;*/
}

#portfolio-item-1 {
  grid-area: portfolio-item-1;
  margin-top: 0px;
  background-color: #4B9A6D;
}

#portfolio-item-2 {
  grid-area: portfolio-item-2;
  background-color: #7541C8;
}

.portfolio-item h4 {
  font-weight: 300;
  font-size: 1.5rem;
  padding-top: 50px;
  padding-bottom: 30px;
  color: #ffff;
}

.portfolio-item p {
  font-weight: 100;
  color: rgba(255, 255, 255, 0.904);
}

.portfolio-item img {
  max-width: 100%;
  min-height: auto;
  margin-top: 17px;
}

.portfolio-item h4,
p {
  padding-left: 25px;
  padding-right: 25px;
}

#view-project {
  color: #ffff;
  padding-top: 25px;
  cursor: pointer;
}

#view-project:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .inner-grid {
    display: grid;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item-1 portfolio-item-2";
  }
  .portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<div class="inner-grid">
  <div id="portfolio-nav">
    <nav id="main-header-nav-style">
      <a href="#" class="portfolio-nav-style">Portfolio</a>
      <a href="#" class="portfolio-nav-style">Learning</a>
    </nav>
  </div>

  <div id="portfolio-item-1" class="portfolio-item">
    <h4>Learning CSS Grid</h4>
    <p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup2.png" alt="">
  </div>

  <div id="portfolio-item-2" class="portfolio-item">
    <h4>Learning Flexbox</h4>
    <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
    <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

于 2021-09-03T19:21:29.047 回答