Прокачиваем навыки CSS: GRID

Есть ста­рый доб­рый CSS: он зада­ёт раз­ме­ры шриф­та, поло­же­ние эле­мен­тов, пла­ва­ю­щие бло­ки и всё такое. Это CSS, кото­рый был во вре­ме­на нашей неж­ной юности.

С тех пор мно­гое изме­ни­лось. CSS стал взрос­лым, злым и адап­тив­ным, и теперь на нём мож­но вер­стать такое, что нам и не сни­лось. Раз­бе­рём­ся в одном из инстру­мен­тов совре­мен­но­го CSS, кото­рый так дела­ет, — Grid. 

Для чего нужен Grid

Допу­стим, у нас сто­ит зада­ча рас­по­ло­жить эле­мен­ты на стра­ни­це в опре­де­лён­ных местах. Например:

  • шап­ку сай­та поста­вить на самый верх, что­бы она зани­ма­ла не боль­ше 100 пикселей;
  • в этой шап­ке преду­смот­реть отдель­ное место, куда мож­но поста­вить инфор­ма­цию о поль­зо­ва­те­ле, когда он вве­дёт свои логин и пароль;
  • основ­ное содер­жи­мое тоже долж­но состо­ять из трёх частей — лево­го меню, ста­тьи и пра­во­го бло­ка с рекламой;
  • пра­вый блок с рекла­мой дол­жен зани­мать от 200 до 150 пикселей;
  • содер­жи­мое ста­тьи пусть зани­ма­ет всё сво­бод­ное про­стран­ство, но с отсту­пом 20 пик­се­лей от каж­до­го края блока;
  • ещё блок со ста­тьёй не может быть в шири­ну мень­ше чем 500 пик­се­лей, боль­ше — можно;
  • вни­зу дол­жен быть блок на всю шири­ну с кон­такт­ной информацией.

Это мож­но сде­лать несколь­ки­ми способами.

Под­клю­чить Bootstrap и завер­стать всё на нём. Мы сра­зу полу­ча­ем адап­тив­ность и раз­бив­ку по бло­кам, но задать нуж­ные раз­ме­ры будет слож­но. Бут­страп хорош, когда нуж­но быст­ро сде­лать что-то адап­тив­ное без силь­ных тре­бо­ва­ний к пик­се­лям и раз­ме­рам. Он счи­та­ет все раз­ме­ры сам и не осо­бо даёт в это вмешаться. 

Исполь­зо­вать таб­ли­цы <table>. Про­ве­рен­ный и рабо­чий спо­соб создать что-то желе­зо­бе­тон­но надёж­ное, но не очень гиб­кое. Минус таб­лиц — мно­го вло­жен­ных тегов и слож­ная рабо­та с груп­пи­ров­кой яче­ек. Так дела­ли сай­ты в девя­но­стых и нулевых. 

При­ме­нить grid. Наш выбор на сего­дня. Grid, как и бут­страп, мож­но сде­лать адап­тив­ным, а рабо­та с ячей­ка­ми и обла­стя­ми в нём намно­го удоб­нее, чем в таб­ли­цах. Но и син­так­сис не такой интуитивный. 

Создаем сетку

Когда мы пишем CSS-команду display: grid, у нас на стра­ни­це появ­ля­ет­ся сет­ка из линий, меж­ду кото­ры­ми нахо­дят­ся ячей­ки. Но в таком виде коман­да создаст сет­ку толь­ко из одной ячей­ки. Что­бы яче­ек ста­ло боль­ше, мож­но задать коли­че­ство строк и столб­цов в сетке:

.mygrid{
    // подключаем сетку
    display: grid;
    // делаем 4 колонки шириной по 100 пикселей каждая
    grid-template-columns: 100px 100px 100px 100px;
    // и 3 строки высотой по 50 пикселей
    grid-template-rows: 50px 50px 50px;
}
…
<div class="mygrid">
  // создаём сетку на странице
<div>
CSS Grid – задаём количество и размер ячеек с помощью инструмента

Обращаемся к частям сетки

Grid — это не про­сто таб­ли­ца с ячей­ка­ми. Сила grid — в спо­со­бах выде­ле­ния нуж­ных яче­ек, что­бы ими мож­но было управ­лять отдельно. 

Для того, что­бы опре­де­лить нуж­ную ячей­ку, исполь­зу­ют линии, дорож­ки, обла­сти и ячей­ки сетки:

Линии, дорожки, области и ячейки сетки в CSS Grid

Линия сет­ки — это линии, кото­рые и фор­ми­ру­ют нашу сет­ку. В нашем при­ме­ре у нас 4 гори­зон­таль­ные линии и 5 вер­ти­каль­ные — пер­вые и послед­ние линии тоже считаются.

Дорож­ка — область от пер­вой линии сет­ки до послед­ней. То, на сколь­ко частей мы раз­де­лим дорож­ки, столь­ко у нас и полу­чит­ся строк и столб­цов. По умол­ча­нию рас­сто­я­ние меж­ду дорож­ка­ми (стро­ка­ми и столб­ца­ми) рав­но нулю, но мы можем изме­нить этот пара­метр и отде­лить дорож­ки друг от дру­га. В этом слу­чае меж­ду ячей­ка­ми появит­ся зазор.

// расстояние между строками

row-gap: 10px;

// расстояние между колонками

column-gap: 5px;

Область сет­ки — пря­мо­уголь­ник, кото­рый полу­чил­ся из нуж­ных нам линий. В нашем при­ме­ре область зада­на лини­я­ми 2 и 4 по гори­зон­та­ли и 3 и 5 — по вертикали:

Область сетки в CSS Grid

Что­бы управ­лять пове­де­ни­ем и внеш­ним видом обла­сти, её нуж­но выде­лить в отдель­ный класс:

 .nasha_oblast {

    grid-row-start: 2;

    grid-row-end: 4;

    grid-column-start: 3;

    grid-column-end: 5;

}

Ячей­ка — самая малень­кая область сет­ки, внут­ри кото­рой мож­но что-то раз­ме­стить. По умол­ча­нию каж­дая новая еди­ни­ца кон­тен­та в сет­ке поме­ща­ет­ся в отдель­ную ячей­ку — сле­ва напра­во и свер­ху вниз. Если нуж­но выне­сти кон­крет­ную ячей­ку в отдель­ный класс — дела­ем это так же, как и для области.

Размеры содержимого сетки

При созда­нии сет­ки мож­но исполь­зо­вать раз­ные еди­ни­цы раз­мер­но­сти, сме­ши­вая их друг с дру­гом. Напри­мер, мож­но ука­зать, что в сет­ке будет три столб­ца — пер­вый шири­ной 100 пик­се­лей, вто­рой будет раз­ме­ром с поло­ви­ну шири­ны экра­на, а тре­тий пусть зани­ма­ет всё остав­ше­е­ся место:

grid-template-columns: 100px 50vw 1fr;

Пик­се­ли: ука­зы­ва­ем нуж­ный нам раз­мер или поль­зу­ем­ся функ­ци­ей minmax(), кото­рая зада­ёт мини­маль­ный и мак­си­маль­ный раз­мер дорожки.

Отно­си­тель­ные вели­чи­ны: Если шири­на или высо­та у нас зави­сят от раз­ме­ров окна бра­у­зе­ра, то мож­но исполь­зо­вать отно­си­тель­ную вели­чи­ну vh (высо­та окна) или vw (шири­на окна):

100vh — вся высо­та окна,

33vh — треть высоты,

50vw — поло­ви­на шири­ны окна браузера.

Для про­сто­ты мож­но пред­ста­вить, что чис­ла перед vh и vw — это про­цен­ты. 100 — это сто про­цен­тов, вся види­мая часть, 50 — это поло­ви­на и так далее. Мож­но ука­зать боль­ше 100, тогда содер­жи­мое уедет за гра­ни­цы окна и нуж­но будет исполь­зо­вать про­крут­ку вниз или вбок.

FR рабо­та­ет так:

  • созда­ёт дорож­ки с нуж­ны­ми пропорциями;
  • или раз­ре­ша­ет зани­мать одной дорож­ке всю сво­бод­ную область окна браузера.

Напри­мер: 

grid-template-columns: 1fr 1fr 1fr 1fr; — 4 колон­ки оди­на­ко­вой ширины;

grid-template-columns: 1fr 1fr 1fr 3fr; — послед­няя колон­ка будет шире осталь­ных в три раза.

Если нам нуж­но что-то рас­тя­нуть на всё сво­бод­ное место, мы можем ука­зать раз­ме­ры осталь­ных эле­мен­тов, а там, где нуж­но рас­тя­нуть, напи­шем 1fr:

grid-template-columns: 100px 1fr 100px;

Этот код сде­ла­ет нам три колон­ки — пер­вая и тре­тья шири­ной 100 пик­се­лей, а вто­рая (цен­траль­ная) зай­мёт всё осталь­ное место. Если раз­мер окна изме­нит­ся, то боко­вые колон­ки оста­нут­ся по 100 пик­се­лей, а цен­траль­ная перестроится. 

Что дальше

Это пер­вая ста­тья про CSS Grid. В сле­ду­ю­щей пого­во­рим о том, как быст­ро созда­вать нуж­ные шаб­ло­ны с сет­кой и как рабо­тать с обла­стя­ми и ячей­ка­ми, а потом собе­рём страницу-портфолио.

Текст, код и иллю­стра­ции:
Миха­ил Полянин

Редак­тор:
Мак­сим Ильяхов

Худож­ник:
Даня Бер­ков­ский

Кор­рек­тор:
Ири­на Михеева

Вёрст­ка:
Мария Дро­но­ва

Соц­се­ти:
Олег Веш­кур­цев