CSS 网格奇怪的行为

问题描述 投票：0回答：1

我想要一个看起来像这样的网格图片库（抱歉图像不好）css grid image gallery，我使用

grid-template-areas
来实现它。

这是我的代码

HTML

      <main class="main">
        <div id="CannelliniBean">
          <img src="images/1.png" alt="" class="dishImg" />
        </div>
        <div id="Cauliflower">
          <img src="images/2.png" alt="" class="dishImg" />
        </div>
        <div id="BerryBanana">
          <img src="images/3.png" alt="" class="dishImg" />
        </div>
        <div id="RedLentilSoup">
          <img src="images/4.png" alt="" class="dishImg" />
        </div>
        <div id="Asparagus">
          <img src="images/5.png" alt="" class="dishImg" />
        </div>
        <div id="GarlickyKale">
          <img src="images/6.png" alt="" class="dishImg" />
        </div>
        <div id="SlowCooker">
          <img src="images/7.png" alt="" class="dishImg" />
        </div>
        <div id="Jambalaya">
          <img src="images/8.png" alt="" class="dishImg" />
        </div>
        <div id="ChickenFajita">
          <img src="images/9.png" alt="" class="dishImg" />
        </div>
        <div id="Hummus">
          <img src="images/10.png" alt="" class="dishImg" />
        </div>
      </main>

CSS

.main {
  padding: 7% 15%;
  display: grid;
  grid-template-areas:
    "CannelliniBean Cauliflower BerryBanana"
    "RedLentilSoup Cauliflower Asparagus"
    "GarlickyKale SlowCooker ChickenFajita"
    ". Jambalaya Hummus .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#CannelliniBean {
  grid-area: CannelliniBean;
}
#Cauliflower {
  grid-area: Cauliflower;
}
#BerryBanana {
  grid-area: BerryBanana;
}
#RedLentilSoup {
  grid-area: RedLentilSoup;
}
#Asparagus {
  grid-area: Asparagus;
}
#GarlickyKale {
  grid-area: GarlickyKale;
}
#SlowCooker {
  grid-area: SlowCooker;
}
#Jambalaya {
  grid-area: Jambalaya;
}
#ChickenFajita {
  grid-area: ChickenFajita;
}
#Hummus {
  grid-area: Hummus;
}

然而，图像最终出现在完全相同的位置！！，在某种程度上，只显示了一张图像，而它后面的所有其他图像都在相同的确切位置，这里发生了什么？

html css css-grid
1个回答
0
投票

试试这个。调一下顺序就好了。查看 grid-column 和 grid-row 属性，您可以使用它们明确告诉 css 如何在网格中定位您的项目。此外，创建一个包含 6 列的网格允许您将最后 2 个项目放在中间。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main {
        padding: 7% 15%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 1fr);
      }

      #CannelliniBean {
        height: 50px;
        background-color: red;
        grid-column: 1 / 3;
        grid-row: 1;
      }

      #Cauliflower {
        height: 100px;
        background-color: green;
        grid-column: 3 / 5;
        grid-row: 1 / span 2;
      }

      #BerryBanana {
        height: 50px;
        background-color: blue;
        grid-column: 5 / 7;
        grid-row: 1;
      }

      #RedLentilSoup {
        height: 50px;
        background-color: orange;
        grid-column: 1 / 3;
        grid-row: 2;
      }

      #Asparagus {
        height: 50px;
        background-color: orangered;
        grid-column: 5 / 7;
        grid-row: 3;
      }

      #GarlickyKale {
        height: 50px;
        background-color: magenta;
        grid-column: 5 / 7;
        grid-row: 2;
      }

      #SlowCooker {
        height: 50px;
        background-color: green;
        grid-column: 1 / 3;
        grid-row: 3;
      }

      #Jambalaya {
        height: 50px;
        background-color: yellow;
        grid-column: 3 / 5;
        grid-row: 3;
      }

      #ChickenFajita {
        height: 50px;
        background-color: rgb(212, 26, 199);
        grid-column: 2 / 4;
        grid-row: 4;
      }

      #Hummus {
        height: 50px;
        background-color: orange;
        grid-column: 4 / 6;
        grid-row: 4;
      }
    </style>
  </head>

  <body>
    <main class="main">
      <div id="CannelliniBean">
        <img src="images/1.png" alt="" class="dishImg" />
      </div>
      <div id="Cauliflower">
        <img src="images/2.png" alt="" class="dishImg" />
      </div>
      <div id="BerryBanana">
        <img src="images/3.png" alt="" class="dishImg" />
      </div>
      <div id="RedLentilSoup">
        <img src="images/4.png" alt="" class="dishImg" />
      </div>
      <div id="Asparagus">
        <img src="images/5.png" alt="" class="dishImg" />
      </div>
      <div id="GarlickyKale">
        <img src="images/6.png" alt="" class="dishImg" />
      </div>
      <div id="SlowCooker">
        <img src="images/7.png" alt="" class="dishImg" />
      </div>
      <div id="Jambalaya">
        <img src="images/8.png" alt="" class="dishImg" />
      </div>
      <div id="ChickenFajita">
        <img src="images/9.png" alt="" class="dishImg" />
      </div>
      <div id="Hummus">
        <img src="images/10.png" alt="" class="dishImg" />
      </div>
    </main>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.