I've added grid-gap to both classes, but the gap area is showing up in a different color than white. Additionally, the text is aligned at the top of each cell. How can I fix this?
1)
Even though I applied grid-gap to both classes, the gap area is visible, but it's not displaying as white; instead, it appears as [#96ceb4]. What steps should I take to resolve this?
2)
Despite using text-align:center, the text is positioned at the top of each cell. I would like the text positioning to be centered within every cell. How can I achieve this?
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>