How to apply grid-gap in display:grid? - html

Question

I applied grid-gap to each of the two classes. However, the gap area is displayed but not white. and the text position is located at the top of each cell. What should I do?
1)
I applied grid-gap to each of the two classes. However, the gap area appears, but it is not white, but [#96ceb4]. What should I do?
2)
I applied text-align:center, but the text position is located at the top of each cell. I want the text position to be located in the center of each cell area. What should I do?
body {
padding: 50px
}
.container div {
text-align: center;
color: #fff;
font-size: 1.5rem;
}
.container div:nth-child(1) {
background: #96ceb4;
}
.container div:nth-child(2) {
background: #ff6f69;
}
.container div:nth-child(3) {
background: #88d8b0;
}
.container div:nth-child(4) {
background: #ffcc5c;
}
.container div:nth-child(5) {
background: #96ceb4;
}
.container div:nth-child(6) {
background: #ff6f69;
}
.one {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 60px 100px;
grid-gap: 10px;
}
.two {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 60px 100px;
grid-gap: 10px;
}
<div class="container">
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<br>
<div class="two">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>

Answer 1

To change the background color of the gap area to white, add the following CSS rule:
.container {
background-color: white;
}
To center the text vertically in each cell, add the following CSS rule:
.container div {
display: flex;
align-items: center;
justify-content: center;
}
Updated code:
.container {
background-color: white;
}
body{padding:50px}
.container div {text-align: center; color:#fff;font-size: 1.5rem;}
.container div:nth-child(1) {background: #96ceb4;}
.container div:nth-child(2) {background: #ff6f69;}
.container div:nth-child(3) {background: #88d8b0;}
.container div:nth-child(4) {background: #ffcc5c;}
.container div:nth-child(5) {background: #96ceb4;}
.container div:nth-child(6) {background: #ff6f69;}
.one {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 60px 100px;
grid-gap:10px;
}
.two {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 60px 100px;
grid-gap:10px;
}
.container div {
display: flex;
align-items: center;
justify-content: center;
}
To change the background color of the gap area to white, add the following CSS rule:
<div class="container">
<div class="one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<br>
<div class="two">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>