Столбцы-шаблон-сетки не работают в сетках

Я только начал изучать css-сетки. Я создал HTML-файл с семью div. Я пытаюсь преобразовать ширину каждого div в 50% с помощью grid-template-columns:1fr 1fr, но это не работает. Все div просто занимают всю ширину тела.

Я не понимал, почему он так себя ведет. Объясните мне, почему все блоки занимают все пространство, а не только 50%.

body {
  display: grid;
  box-sizing: border-box;
}

div {
  grid-template-columns: 1fr 1fr;
  border: 0.5px solid black;
  height: 100px;
}

#one{background-color:#9f9}
#two{background-color:#f99}
#three{background-color:#99f}
#four{background-color:#555}
#five{background-color:rgb(25, 233, 25)}
#six{background-color:rgb(255, 214, 153)}
#seven{background-color:rgb(255, 253, 153)}
<div id=one></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>

шаблон сетки должен быть определен на элементе сетки, чтобы тело

Temani Afif 10.08.2018 15:30
0
1
2 351
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Свойство grid-template-columns применяется к контейнеру сетки, поэтому поместите его в то же объявление, что и display: grid.

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
}

div {
  border: 0.5px solid black;
  height: 100px;
}

#one{background-color:#9f9}
#two{background-color:#f99}
#three{background-color:#99f}
#four{background-color:#555}
#five{background-color:rgb(25, 233, 25)}
#six{background-color:rgb(255, 214, 153)}
#seven{background-color:rgb(255, 253, 153)}
<div id=one></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>

Другие вопросы по теме