Почему сетка не оставляет клетки, отмеченные знаком "."пусто? - PullRequest
Новая
       1

Почему сетка не оставляет клетки, отмеченные знаком "."пусто?

2 голосов
/ 10 мая 2019

Моя попытка: 

#mygrid {
  border:1px solid black;
  width:160px;
  display:grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a . . b";
}
<div id = "mygrid">
  <div>hello</div>
  <div>there</div>
</div>

Разве он не должен помещаться "туда" в последнюю ячейку, поскольку две средние должны быть оставлены пустыми?

Ответы [ 2 ]

2 голосов
/ 10 мая 2019

Если вы хотите поместить hello в область a и there в область b.Сделай это 

#mygrid {
  border:1px solid black;
  width:160px;
  display:grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a . . b";
}

/* Placing to grid areas */

#mygrid div:first-child {
  grid-area: a;
}

#mygrid div:last-child {
  grid-area: b;
}
<div id = "mygrid">
  <div>hello</div>
  <div>there</div>
</div>
0 голосов
/ 10 мая 2019

Вы определили 4 столбца, поэтому браузер будет заполнять их, начиная с первого, и не будет прыгать тот, что в середине, определенный ., если вы явно не сказали ему сделать это.

Если вы хотите смоделировать такое поведение, вы можете просто определить 2 столбца и опираться на пробелы: 

#mygrid {
  border: 1px solid black;
  width: 160px;
  display: grid;
  grid-template-columns: 40px 40px;
  grid-column-gap: 80px;
  grid-template-areas: "a  b";
}
<div id="mygrid">
  <div>hello</div>
  <div>there</div>
</div>

Другая идея заключается в использовании пустого элемента для заполнения этих столбцов: 

#mygrid {
  border: 1px solid black;
  width: 160px;
  display: grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a i i b";
}

#mygrid:before {
  content:"";
  grid-area:i;
}
<div id="mygrid">
  <div>hello</div>
  <div>there</div>
</div>
...