Смешивание CSS Сетка именованных областей с номерами строк и столбцов не работает для меня - PullRequest
Новая
       4

Смешивание CSS Сетка именованных областей с номерами строк и столбцов не работает для меня

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

Я сейчас начинаю иметь дело с CSS сетками и пытаюсь понять поведение смешивания именованных областей сетки с синтаксисом grid-area: 1/3/3/5.

В приведенном ниже коде, для чего я понимаю, что я создаю 2 столбца (grid-template-columns: 25% 75%) и делю его на 5 "частей" ("hd hd hd hd hd", et c.)

Я знаю, что для элемента #four я мог бы просто установить grid-area: ft. Но почему grid-area: 3/1/3/2 не работает так же? Я полагаю, что при использовании 2 в grid-area: 3/1/3/2 (последний столбец = 2) элемент будет занимать два столбца, которые я создал с помощью grid-template-columns: 25% 75%.

Вместо этого он занимает только небольшую часть последний ряд Мне нужно использовать 6 (почему 6?), Чтобы он занимал весь ряд. 

.container {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: 150px 350px 80px;
  grid-template-areas: 
    "hd hd hd hd hd"
    "sb main main main main"
    "ft ft ft ft ft";
}

#one{
  grid-area: hd;
}

#two{
  grid-area: sb;
}

#three{
  grid-area: main;
}

#four{
  grid-area: 3/1/3/6;
}
<div class="container">
  <div class="box" id="one">Box 1</div>
  <div class="box" id="two">Box 2</div>
  <div class="box" id="three">Box 3</div>
  <div class="box" id="four">Box 4</div>  
</div>

1 Ответ

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

В приведенном ниже коде, насколько я понимаю, я создаю 2 столбца (grid-template-columns: 25% 75%) и делю его на 5 "частей" ("hd hd hd hd hd", et c.)

Вы создаете 5 столбцов, в которых первые два равны 25% и 75%, а последние 3 пусты.

В вашем случае используется grid-area: 3/1/3/2 или grid-area: 3/1/3/6 даст вам тот же визуальный результат, поскольку у вас есть 3 пустых столбца, но вы можете заметить разницу, если добавите несколько пробелов: 

.container {
  display: grid;
  grid-template-columns: 21% 75%;
  grid-gap:1%;
  grid-template-areas: 
    "hd hd hd hd hd"
    "sb main main main main"
    "ft ft ft ft ft";
  margin:5px;
  border:1px solid;
}

#one{
  grid-area: hd;
}

#two{
  grid-area: sb;
}

#three{
  grid-area: main;
}

#four{
  grid-area: 3/1/3/6;
  background:red;
}
<div class="container">
  <div class="box" id="one">Box 1</div>
  <div class="box" id="two">Box 2</div>
  <div class="box" id="three">Box 3</div>
  <div class="box" id="four">Box 4</div>  
</div>

<div class="container">
  <div class="box" id="one">Box 1</div>
  <div class="box" id="two">Box 2</div>
  <div class="box" id="three">Box 3</div>
  <div class="box" id="four" style="grid-area: 3/1/3/3;">Box 4</div>  
</div>

Начиная с спецификации :

Размер явной сетки определяется большее от числа строк / столбцов, определяемых как grid-template-areas, и количества строк / столбцов с размером grid-template-rows / grid-template-columns. Все строки / столбцы, определенные как grid-template-areas, но не имеющие размера grid-template-rows / grid-template-columns, берут свой размер из свойств grid-auto-rows / grid-auto-columns

По умолчанию для grid-auto-columns установлено значение auto и установкой 25% 75% вы уже охватили все доступное пространство, поэтому у вас будет 3 пустых столбца.

...