I'm in the process of updating my website indexes and decided to incorporate grids. However, when attempting to implement grids using Dreamweaver, I encountered several issues. Firstly, an error message appeared stating "Expected RBRACE at line 72, col 53." Secondly, the grid didn't align as a 4 by 5 layout, with the content inside not resizing correctly. Lastly, the image within the div didn't cover the div identified by the class name "inside-box." Can anyone provide a solution to this problem? Your help would be greatly appreciated. Apologies for the lengthy code; I'm relatively new to Stackoverflow.
I've attempted to align the divs and remove grid-template-columns, but these solutions didn't work.
Edit: Here is the link to my webpage:
/*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 onwards... -->
</div>
<br>
<!--END OF HTML FILE-->I anticipate the layout to conform to a 4 by 5 grid seamlessly without any errors.