Can someone help me out with a coding issue I am facing? Here's the scenario:
I have set up all my boxes on a grid layout, but I want all the black borders to touch each other seamlessly. Essentially, I want the entire page to be filled only with the grid layout. Below is the code snippet for reference:
DEMO:
* {
margin: 0 auto;
}
body {
width: 100%;
height: 100%;
min-width: 100%;
overflow: hidden;
}
.grid-container {
display: grid;
grid-template-columns: 0.8fr 2fr 0.8fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"logo nav time"
"computer-menu terminal computer-anim"
"missions terminal notebook"
"missions terminal notebook";
}
.missions {
grid-area: missions;
border: 3px solid black;
}
.terminal {
grid-area: terminal;
border: 3px solid black;
}
.notebook {
grid-area: notebook;
border: 3px solid black;
}
.computer-menu {
grid-area: computer-menu;
border: 3px solid black;
}
.logo {
grid-area: logo;
border: 3px solid black;
}
.nav {
grid-area: nav;
border: 3px solid black;
}
.time {
grid-area: time;
border: 3px solid black;
}
.computer-anim {
grid-area: computer-anim;
border: 3px solid black;
}<div class="grid-container">
<div class="missions"><h1>MISSIONS</h1></div>
<div class="terminal"><h1>TERMINAL</h1></div>
<div class="notebook"><h1>NOTEBOOK</h1></div>
<div class="computer-menu"><h1>COMPUTER-MENU</h1></div>
<div class="logo"><h1>LOGO</h1></div>
<div class="nav"><h1>NAV</h1></div>
<div class="time"><h1>TIME</h1></div>
<div class="computer-anim"><h1>COMPUTER-ANIM</h1></div>
</div>