0

Пожалуйста, объясните чем отличаются свойства (grid-row и grid-template-rows), (grid-column и grid-template-columns). Просто в различных статьях этим парам свойств даны одинаковые определения и они все поддерживаются любыми браузерами.

1
  • grid-row, grid-column дают дочернему элементу грида. 21 авг 2022 в 6:39

1 ответ 1

0

template`s применяются к грид контейнеру, не темплы, к его потомкам.

наглядный пример:

div{
display: grid;
grid-template-columns: 1f 2fr 3fr;
grid-template-rows: 3fr 1fr;
/* template задают шаблон на осове которого и стоится сетка*/
}

b{border: 1px dashed #987; background: gray;}

#a{grid-column: 5; background: pink}/*задает потомку контретную точку в сетке*/
#b{grid-column: 4; grid-row: 1; background: orange;}
#d{grid-column: 4/7; background: green;}
<div>
<b>1</b>
<b>2</b>
<b id='a'>3</b>
<b>4</b>
<b>5</b>
<b id='b'>6</b>
<b>7</b>
<b id='c'>8</b>
<b id='d'>9</b>
<b>10</b>
<b>11</b>
<b>12</b>
<b>13</b>
<b>14</b>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.