Здравствуйте! Этой статьей я начинаю цикл материалов посвященных Grid Layout. В этой статье я расскажу что такое Grid Layout и Grid Container. Grid Layout это такой модуль CSS3, который позволяет выстраивать элементы на странице сеткой или таблицей. Также как и модуль Flexbox Grid Layout позволяет задавать положение элементов, только в отличие от флекса он может сразу поизиционировать элемент в 2-х осях как по вертикали так и по горизонтали в отличие от флексбокса, который может только в какой-то одной оси об остальных отличиях флксбокса и грида читайте здесь.
Ну а спецификацию на модуль Grid Layout можно почитать на сайте www.w3.org/TR/css-grid-1/.
Конечно при использовании следует учитвать, что технология Grid Layout довольно молодая и лишь недавно современные браузеры начали ее поддерживать. Ниже можно посмотреть какими браузерами она поддерживается:
Как видите только лишь новые версии браузеров поддерживают эту технологию. Но это пока, а пройдет еще год два и она будет использоваться повсеместно как сейчас флексбоксы.
Рассмотрим компоновку Grid Layout. Основной единицей в сетке я вляется так называемый грид-контейнер, внутри которого и будут размещаются наши элементы (рисунки, текст, списки и.т.д). Для его создания надо присвоить свойству display одно из 2 значений: grid или inline-grid. Давайте лучше разберем на примере.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <title>Макет Grid Layout в CSS3</title> <style> .grid { border: solid 3px red; display: grid; } .grid-item { text-align:center; font-size: 14px; padding: 1.5em; color: white; } .cvet1 {background-color: brown;} .cvet2 {background-color: magenta;} .cvet3 {background-color: tomato;} .cvet4 {background-color: cyan;} </style> </head> <body> <div class="grid"> <div class="grid-item cvet1">Grid Item 1</div> <div class="grid-item cvet2">Grid Item 2</div> <div class="grid-item cvet3">Grid Item 3</div> <div class="grid-item cvet4">Grid Item 4</div> <div class="grid-item cvet1">Grid Item 5</div> </div> </body> </html>
Из примера видно, что контейнер с классом grid имеет свойство display:grid. В нем располагаются 5 grid-элементов.
А вот если изменить значение grid на inline-grid то элемент будет строчный
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <title>Верстка Grid Layout в CSS3</title> <style> .grid { border: solid 2px red; display: inline-grid; } .grid-item { box-sizing: border-box; text-align:center; font-size: 14px; padding: 15px; color: white; } .cvet1 {background-color: orange;} .cvet2 {background-color: magenta;} .cvet3 {background-color: cyan;} .cvet4 {background-color: tomato;} </style> </head> <body> <div class="grid"> <div class="grid-item cvet1">Grid Item 1</div> <div class="grid-item cvet2">Grid Item 2</div> <div class="grid-item cvet3">Grid Item 3</div> <div class="grid-item cvet4">Grid Item 4</div> <div class="grid-item cvet1">Grid Item 5</div> </div> </body> </html>
Как видно из примера в этом случае грид-элемент занимает только ту площадь, которая необходима для его размещения.
Для закрепления посмотрите видео что такое grid layout.
Об авторе