Что такое Grid Layout.

Оцените материал
(0 голосов)

Здравствуйте! Этой статьей я начинаю цикл материалов посвященных 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

Конечно при использовании следует учитвать, что технология  Grid Layout  довольно молодая и лишь недавно современные  браузеры начали ее поддерживать. Ниже можно посмотреть какими браузерами она поддерживается:

  • Google Chrome - с  57
  • Mozilla Firefox - с  52
  • Opera - с  44
  • Safari - с 10.1
  • iOS Safari - с 10.3

Как видите только лишь новые версии браузеров  поддерживают эту технологию. Но это пока, а пройдет  еще год два и она будет использоваться повсеместно как сейчас флексбоксы.

Как создать grid-контейнер.

Рассмотрим  компоновку 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.

 

Прочитано 398 раз Последнее изменение Суббота, 26 августа 2017 12:59
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+