HTML 和 CSS 网格未正确对齐 CSS 中的 RBRACE 错误

Question

我正在为我的网站重新制作索引，并想使用网格。所以我尝试在 Dreamweaver 上使用网格并遇到了一些问题。第一个是我有一个错误，上面写着“第 72 行第 53 列的预期 RBRACE”。第二个问题是网格未在 4 x 5 网格中对齐，并且网格内的内容大小不正确。第三个问题是div里面的图片没有覆盖类名为“inside-box”的div。我遇到的这个问题的解决方案是什么？请帮我。对不起，代码很长。我也是 Stackoverflow 的新手。

我尝试对齐我的 div 并删除 grid-template-columns，但它们不起作用。

编辑： 这是我网页的链接： http://techteach.us/Web2020/ZWeiJian/Labs/Index.html

/*The CSS for making the grids.*/
.wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(4, 1fr));
  grid-column-gap: 0.5px;
  grid-row-gap: 75px;
  grid-auto-rows: minmax(200px, auto);
}

/*For each individual box.*/
.box{
  border: 1px solid black;
  min-width: 20%;
  background-color: white;
  margin: 0;
}

/*Creates the styling of the dropdown box.*/
.dropdown-content {
  display: none;
  position: relative;
  background-color: blue;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

/*Makes a dropdown box when hovered over.*/
.inside-box:hover .dropdown-content{
  display: block;
}

<!--HTML FILE-->
<div class="wrapper">

   <!--Lab 1-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 1</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>
	
   <!--Lab 2-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 2</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 3-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3> Lab 3</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 4-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 4</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>
</div>
     <!--End of inside box div.-->
     

   <!--End of box div.-->
   </div>

   <!--Lab 5-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 5</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 6-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 6</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 7-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 7</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 8-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 8</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 9-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 9</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 10-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 10</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 11-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 11</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 12-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 12</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 13-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 13</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 14-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 14</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 15-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 15</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 16-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 16</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 17-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 17</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 18-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 18</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 19-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 19</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 20-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 20</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

</div>
 <br>
<!--END OF HTML FILE-->

我希望它在 4 x 5 的网格中没有错误。

Answer 1

主要问题在于下面一行：

/* incorrect */

grid-template-columns: repeat(auto-fill, minmax(4, 1fr));

auto-fill 正在使列填充整个网格区域。将以下行替换为：

/* Try this instead */

grid-template-columns: repeat(4, 1fr);

我不确定总体意图，因此无法评论其他观点。请详细说明您要在这里做什么。

另外，另外，如果您对开发技能很认真，请考虑使用其他功能丰富的代码编辑器，例如 VS Code、Atom 或 Sublime。