英文:
How to apply grid-gap in display:grid?
问题
我对两个类应用了grid-gap。然而，间隙区域显示出来了，但不是白色，而是[#96ceb4]的颜色。我该怎么办？
我应用了text-align:center，但文本位置位于每个单元格的顶部。我希望文本位置位于每个单元格区域的中心。我该怎么办？
英文:
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?
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?
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?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
改变间隙区域的背景颜色为白色，添加以下CSS规则：
.container {
background-color: white;
}
为了垂直居中每个单元格中的文本，添加以下CSS规则：
.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:
.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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论