为什么我的CSS网格行相互折叠？

Question

我正在使用CSS Grid Layout替换HTML表结构。我有两个grid-template-columns和grid-template-areas多行。

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

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站在same区域，对于重复的内容，请使用grid-column位置代替grid-area。

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

仅将.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>