Мой столбец сетки отображается в несколько строк, а не в одну - PullRequest
Новая
       11

Мой столбец сетки отображается в несколько строк, а не в одну

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

Я пытаюсь создать систему сетки, используя имя класса. для этого я разделил строку на 2 столбца. как только я это сделаю, 2 столбца преобразуются в 2 строки. как это предотвратить?

Я пытаюсь создать библиотечный подход. чтобы люди могли использовать смешанные столбцы для своих нужд. 

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-gap:10px;
}

.column-6{
  border:1px solid red;
  grid-column:1/6;
}
<div class="grid">
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
</div>

Здесь я сохраняю значение по умолчанию как 12fr, оно разделено на 2 столбца. но показывает мне как 2 ряда. нужно ли добавлять какие-либо свойства выравнивания или обтекания?

Заранее спасибо.

update

Я пытался добавить следующие свойства: 

.column-6{
  border:1px solid red;
  grid-column:1/6;
  grid-row:1/1;
}

но оба сливаются в собранные.

1 Ответ

2 голосов
/ 10 марта 2020

Все, что вам нужно, это использовать span 6. Устанавливая 1/6, вы явно устанавливаете начальную и конечную строки, тогда как вам нужно только указать количество столбцов и оставить автоматическое размещение: 

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-gap:10px;
}

.column-6{
  border:1px solid red;
  grid-column:span 6;
}
<div class="grid">
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
  <div class="column-6">colunm 50%</div>
  <div class="column-6">column 50%</div>
</div>
...