[Практика] display: grid;

Верстали ли вы до этого на grid'ах?

  • Да

  • Нет

  • Я не фронтендер / Не веб-программист


Результаты будут видны только после голосования.

spais

Регистрация
4 Июн 2018
Сообщения
37
Реакции
102
Есть у нас такой html код
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
CSS:
*
{
    margin:0;
    padding:0;
    background: #141414;
}
body
{
    color:#fff;
    font-family: sans-serif;
}
div
{
    background: darkblue;
    border:0;
    border-radius: 5px;
}


Сейчас это выглядит так

1547221863126.png


Добавим к стилю body - display: grid;
CSS:
body
{
display:grid;
...
}


И о чудо, ничего не изменилось

1547221942390.png


А все потому что мы не задали количество колонок

Сделаем 2 колонки
Пожалуйста войдите или зарегистрируйтесь чтобы просматривать скрытый текст.

CSS:
body
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    ...
}


Уже что-то

1547222114407.png


Зададим высоту рядов ( repeat это повторение ... : repeat(количество повторов, значение); )
(( так же можно прописать grid-auto-rows:100px; будет то же самое ))
CSS:
body
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(9,100px);
    ...
}


Видим что блоки стали высотой 100px(какая неожиданность)

1547222327942.png


Как же их отлепить друг от друга?

Вот так
Код:
grid-gap: значение; - по кругу установить отступ

grid-column-gap: значение; - между столбцами

grid-row-gap: значение; - между строками

Минимальное/максимальное значение

minmax(минимальное значение, максимальное значение)

Можно использовать со всеми вышеперечисленными функциями
Например:
grid-auto-rows:minmax(100px, 150px);


Не конец
 
Сверху Снизу