Custom CSS Grid Layout for Displaying Sports Team

Question

I want to make this custom grid layout from to represent the Players of the team, being separated by each position (GK, Defense, Midfielders and Forwards) look like the image below, and In a way that could be responsive (image 1).

The results we are getting by now are looking like this (image 2).

 .item1 { grid-area: main; } .item2 { grid-area: main; } .item3 { grid-area: footer; } .item4 { grid-area: footer; } .grid-container { grid-template-areas: 'main main main main' 'footer footer footer footer'; gap: 30px; background-color: #000000; padding: 50px; display: inline-flex; justify-content: center; margin-left: 130px; margin-right: 5px; } .grid-container>div { background-color: rgb(255, 255, 255); padding: 60px 30px; font-size: 30px; align-content: center; } .container { position: relative; width: 50%; } .overlay { position: absolute; top: -60px; bottom: 0; left: -30px; right: 0; height: 160%; width: 260%; opacity: 0%; transition: .5s ease; background-color: #343536; } .image { display: block; width: 200px; height: 200px; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <div id="plantel"> <h1 id='Text'>Plantel</h1> <div class="grid-container"> <div class="item1"> <div class="container"> <img src={jogadores1} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">Roberto</p> </div> </div> </div> <div class="item1"> <div class="container"> <img src={jogadores2} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">minha</p> </div> </div> </div> <div class="item1"> <div class="container"> <img src={jogadores3} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">sua</p> </div> </div> </div> </div> <div class="grid-container"> <div class="item4"> <div class="container"> <img src={jogadores1} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">Roberto</p> </div> </div> </div> <div class="item4"> <div class="container"> <img src={jogadores1} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">Roberto</p> </div> </div> </div> <div class="item4"> <div class="container"> <img src={jogadores1} alt="Avatar" class="image" /> <div class="overlay"> <p class="text">Roberto</p> </div> </div> </div> </div>

Answer 1

将网格容器宽度更改为 100vh 或 100%