This is driving me crazy. Just trying to fit this grid into the entire page with height and vw value. But when I write it on CSS it appears the scroll bar!!! How do I fix this? Here's the html. It's just a basic thing but I don't know what to do!
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr) 0.1fr;
grid-gap: 10px;
height: 100vh;
}
.a {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 1 / 4;
grid-row: 4 / 7;
}
.b {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.c {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 5 / 7;
grid-row: 1 / 3;
}
.name {
grid-column: 1 / 3;
grid-row: 7 / 7;
}
.contact {
grid-column: 4 / 6;
grid-row: 7 / 7;
}
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="name">
<p>Name</p>
</div>
<div class="contact">
<p>Contact</p>
</div>
</div>
Any clues?
You have to reset your margin for html
and body
. If you still would like to keep padding, you can give it to your .grid
class but reduce the equal value from height.
html,
body {
margin: 0
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr) 0.1fr;
grid-gap: 10px;
height: 96vh;
padding: 2vh
}
.a {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 1 / 4;
grid-row: 4 / 7;
}
.b {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.c {
background-color: #d8d8d8;
border: solid #000000 2px;
padding: 10px;
grid-column: 5 / 7;
grid-row: 1 / 3;
}
.name {
grid-column: 1 / 3;
grid-row: 7 / 7;
}
.contact {
grid-column: 4 / 6;
grid-row: 7 / 7;
}
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="name">
<p>Name</p>
</div>
<div class="contact">
<p>Contact</p>
</div>
</div>