Почему мои CSS ряды сетки сваливаются друг на друга? - PullRequest
Новая
       6

Почему мои CSS ряды сетки сваливаются друг на друга?

0 голосов
/ 26 марта 2020

Я использую 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>

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Вы говорите вашему div, чтобы он стоял в той же области , вместо размещения grid-area используйте размещение grid-column. 

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>
0 голосов
/ 26 марта 2020

Помещайте только классы .cellLeft и .cellRight в первые два .row деления. После этого пусть 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>
...