- Регистрация
- 4 Июн 2018
- Сообщения
- 37
- Реакции
- 102
Есть у нас такой html код
И такой css
Сейчас это выглядит так
Добавим к стилю body - display: grid;
И о чудо, ничего не изменилось
А все потому что мы не задали количество колонок
Сделаем 2 колонки
Уже что-то
Зададим высоту рядов ( repeat это повторение ... : repeat(количество повторов, значение); )
(( так же можно прописать grid-auto-rows:100px; будет то же самое ))
Видим что блоки стали высотой 100px(какая неожиданность)
Как же их отлепить друг от друга?
Вот так
Минимальное/максимальное значение
Можно использовать со всеми вышеперечисленными функциями
Например:
Не конец
HTML:
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>
CSS:
*
{
margin:0;
padding:0;
background: #141414;
}
body
{
color:#fff;
font-family: sans-serif;
}
div
{
background: darkblue;
border:0;
border-radius: 5px;
}Сейчас это выглядит так
Добавим к стилю body - display: grid;
CSS:
body
{
display:grid;
...
}И о чудо, ничего не изменилось
А все потому что мы не задали количество колонок
Сделаем 2 колонки
Пожалуйста войдите или зарегистрируйтесь чтобы просматривать скрытый текст.
CSS:
body
{
display: grid;
grid-template-columns: 1fr 1fr;
...
}Уже что-то
Зададим высоту рядов ( repeat это повторение ... : repeat(количество повторов, значение); )
(( так же можно прописать grid-auto-rows:100px; будет то же самое ))
CSS:
body
{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(9,100px);
...
}Видим что блоки стали высотой 100px(какая неожиданность)
Как же их отлепить друг от друга?
Вот так
Код:
grid-gap: значение; - по кругу установить отступ
grid-column-gap: значение; - между столбцами
grid-row-gap: значение; - между строкамиМинимальное/максимальное значение
minmax(минимальное значение, максимальное значение)Можно использовать со всеми вышеперечисленными функциями
Например:
grid-auto-rows:minmax(100px, 150px);Не конец
