I am experiencing an issue with a simple grid where the content of two grid items is overflowing and not staying within their designated areas.
Below is the code snippet I am using, which was partially inspired by this post:
body{
background-color: #E3E3E3;
}
#six.container{
display: grid;
grid-template:
[row1-start] "header header header" 40px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
background-color: #FFF3E8;
}
#six .item{
text-align: center;
border-radius: 5px;
border: 1px solid #F78100;
background-color: #F89426;
margin: 5px;
}<h2>Grid 6</h2>
<div class="container" id="six">
<div class="item item-1">item 1</div>
<div class="item item-2">item 2</div>
<div class="item item-3">item 3</div>
<div class="item item-4">item 4</div>
<div class="item item-5">item 5</div>
<div class="item item-6">item 6</div>
</div>It seems that item 2 and 5 are not displaying correctly within the grid.