CSS网格-表格行相互重叠书写

Question

我正在使用CSSGrid替换HTML表结构。我有两个带有多行的网格模板列和网格模板区域。

所有行似乎都被彼此覆盖。我错过了什么？

body{
  font-family:calibri, helvetica;
  color:whitesmoke;
  background:#222;
}
.table{
  width: 250px;
  border: 1px solid rgba(250,250,250,.4);
  border-bottom: none;
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-areas:
    'header   header'
    'title    title'
    'cellLeft cellRight';
}
.header{
  grid-area:header;
  text-align:center;
  font-size: 1.5rem;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.title{
  grid-area:title;
  text-align:center;
  font-size:1.2rem;
  color:palegoldenrod;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.cellLeft{
  grid-area: cellLeft;
}
.cellRight{
  grid-area: cellRight;
}
.row{
  text-align:center;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.row:nth-child(odd){
  border-right:1px solid rgba(250,250,250,0.4);
}

<div class="table">
  <div class="header">
    Table Header
  </div>
  <div class="title">
    Title of Section
  </div>
  <div class="row cellLeft">
    Label 1
  </div>
  <div class="row cellRight">
    First bit of information
  </div>
  <div class="row cellLeft">
    Label 2
  </div>
  <div class="row cellRight">
    Next bit of information
  </div>
  <div class="row cellLeft">
    Label 3
  </div>
  <div class="row cellRight">
    Final bit of information
  </div>
</div>

Answer 1

您告诉div站在同一区域，请改为使用列的位置。

body{
  font-family:calibri, helvetica;
  color:whitesmoke;
  background:#222;
}
.table{
  width: 250px;
  border: 1px solid rgba(250,250,250,.4);
  border-bottom: none;
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-areas:
    'header   header'
    'title    title'
    'cellLeft cellRight';
}
.header{
  grid-area:header;
  text-align:center;
  font-size: 1.5rem;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.title{
  grid-area:title;
  text-align:center;
  font-size:1.2rem;
  color:palegoldenrod;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.cellLeft{
  grid-column:1;
}
.cellRight{
  grid-column:2;
}
.row{
  text-align:center;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.row:nth-child(odd){
  border-right:1px solid rgba(250,250,250,0.4);
}

<div class="table">
  <div class="header">
  Table Header
  </div>
  <div class="title">
  Title of Section
  </div>
    <div class="row cellLeft">
    Label 1
    </div>
    <div class="row cellRight">
    First bit of information
    </div>
    <div class="row cellLeft">
    Label 2
    </div>
    <div class="row cellRight">
    Next bit of information
    </div>
    <div class="row cellLeft">
    Label 3
    </div>
    <div class="row cellRight">
    Final bit of information
    </div>
</div>

Answer 2

解决方案：

经过一番苦思冥想和无用的Google搜索，我意识到了自己的错误。

仅将.cellLeft和.cellRight类放在前两个.rowdiv上。之后，让CSS Grid管理布局。

body{
  font-family:calibri, helvetica;
  color:whitesmoke;
  background:#222;
}
.table{
  width: 250px;
  border: 1px solid rgba(250,250,250,.4);
  border-bottom: none;
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-areas:
    'header   header'
    'title    title'
    'cellLeft cellRight';
}
.header{
  grid-area:header;
  text-align:center;
  font-size: 1.5rem;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.title{
  grid-area:title;
  text-align:center;
  font-size:1.2rem;
  color:palegoldenrod;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.cellLeft{
  grid-area: cellLeft;
}
.cellRight{
  grid-area: cellRight;
}
.row{
  text-align:center;
  border-bottom:1px solid rgba(250,250,250,.4);
}
.row:nth-child(odd){
  border-right:1px solid rgba(250,250,250,0.4);
}

<div class="table">
  <div class="header">
    Table Header
  </div>
  <div class="title">
    Title of Section
  </div>
  <div class="row cellLeft">
    Label 1
  </div>
  <div class="row cellRight">
    First bit of information
  </div>
  <div class="row">
    Label 2
  </div>
  <div class="row">
    Next bit of information
  </div>
  <div class="row">
    Label 3
  </div>
  <div class="row">
    Final bit of information
  </div>
</div>