CSS Grid. Родительский элемент. Основные свойства раскладки

css Grid ( CSS Grid Layout ) на сегодня применим в Chrome, Opera, Firefox, Edge, Safari, браузер Android, Яндекс. . В IE применение ограничено, в Opera Mini не применяется, также, как в некоторых других, менее популярных (рис. 1). 

CSS Grid кардинально отличается от Flexbox. Больше всего Grid похож на модульную сетку. Представьте себе лист бумаги, разделенный на квадраты и прямоугольники, каждый из которых содержит отдельный блок (рис. 2). 

Можно устанавливать размеры не только основных элементов, но и пробельных шагов. CSS Grid предлагается использовать для макетов больших размеров, например, страница. Тогда как Flexbox лучше применять для элементов внутри страницы. 

Свойства есть как для родительского элемента, так и для дочерних. Родительским элементом будет некий контейнер, дочерними — элементы. Элементы вложены в контейнер. Например (рис. 3), применим свойство Grid к виду страницы, показанному на рис. 2.

Определимся с терминами. 

• Контейнер сетки (контейнер) — родительский элемент. 
• Линии сетки (горизонтальная и вертикальная) — линии, которые определяют структуру сетки.
• Ячейка сетки — пространство между соседними горизонтальными и соседними вертикальными линиями.
• Трек — пространство между двумя соседними линиями, горизонтальными или вертикальными.

Основные свойства css Grid

display:

display: grid;  - 

- означает, что контейнер будет использовать свойство grid по умолчанию, как простую сетку;

Свойства column, float, clear, vertical-align к раскладке не применимы.

grid-template-columns

Определяет колонки сетки. Указываются размеры треков через пробел. Трек — расстояние между двумя соседними линиями. Здесь — между двумя вертикальными линиями.

grid-template-rows 

Определяет строки сетки. Указывается расстояние между двумя соседними горизонтальными линиями.

Например, для рис. 3 определим длину элемента первой строки в 30% и высоту 1-й и 3-й строки как 10em, высоту 2-й как 5em.

Вид:

Код:

<meta charset="utf-8">
<style>
 .examplegrid, 
 .examplegrid1, 
 .examplegrid2, 
 .examplegrid3  {
    border: dotted 1px red;
    font-size: 12px;
    text-align: center;
  } 

 .examplegrid  {
    display : grid;
    grid-template-columns: 30% 30%  30%;
    grid-template-rows: 10em 5em 10em; 
  } 

 .examplegrid1  {
    display : grid;
    grid-template-columns: repeat(2,40%) auto;
    grid-template-rows: 10em 5em 10em; 
  }

 .examplegrid2  {
    display : grid;
    grid-template-columns: 1fr 2fr  3fr;
    grid-template-rows: 10em 5em 10em; 
  }

 .examplegrid3  {
    display : grid;
    grid-template-columns: 2fr 250px  1fr;
    grid-template-rows: 10em 5em 10em; 
    grid-column-gap: 10px;
    grid-row-gap: 5px;
  } 

 .examplegrid div, 
 .examplegrid1 div, 
 .examplegrid2 div, 
 .examplegrid3 div {
    border: dotted 2px green;    
  }
 
</style>

<h4>Свойство Grid</h4>

  <div class="examplegrid">

    <div>
      <strong>1</strong>
    </div>

    <div>
      <strong>2</strong>
    </div>

    <div>
      <code>
        .examplegrid {display : grid;}
      </code>
    </div>

    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>

  </div>
    <br>
  <div class="examplegrid1">

    <div>
      <strong>1</strong>
    </div>

    <div>
      <strong> 
        <code>
          .examplegrid1 {display : grid;} 
        </code>
      </strong>
    </div>

    <div>3</div>
    <div>4</div>
    <div>repeat</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>

  </div>
    <br>

  <div class="examplegrid2">

    <div>
      <strong>1</strong>
    </div>

    <div>
      <strong> 
        <code>
          .examplegrid2 {display : grid;} 
        </code>
      </strong>
    </div>

    <div>3</div>
    <div>4</div>
    <div>fr</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>

  </div>
    <br>
  <div class="examplegrid3">

    <div>
      <strong>1</strong>
    </div>

    <div>
      <strong> 
        <code>
          .examplegrid3 {display : grid;} 
        </code>
      </strong>
    </div>
    <div>3</div>
    <div>4</div>
    <div>fr + px</div>
    <div>6</div>
    <div>7</div>
    <div>
      column-gap<br>row-gap
    </div>
    <div>9</div>

  </div>

Когда размер трека повторяется, можно использовать repeat. Указываем repeat, затем в скобках количество и размер повторяющихся элементов через запятую. Например, repeat(2, 30em).

Также можно использовать единицу fr. Она означает свободное пространство. Эта единица подобна auto. Через fr мы можем разделить все пространство между крайними линиями на пропорциональные части.

Если какой-то трек имеет конкретное значение, остальное пространство можно распределить через единицу fr. 

grid - column - gap; grid - row - gap;

Позволяет установить пробельные шаги — расстояние между ячейками - как по горизонтали, так и по вертикали.

grid - column - gap устанавливает пробельный шаг по вертикали;

grid - row - gap устанавливает пробельный шаг по горизонтали.

Можно использовать сокращенное свойство grid - gap. Указывается расстояние 

по горизонтали и вертикали через пробел:

grid - gap: grid - row - gap grid - column - gap; 

grid - gap: 5px 8px; 

Если указать только одно свойство , а второе свойство не указывать, grid - row — gap и grid - column — gap будут равны.

grid - gap: 5px ; 

В этой статье я рассказала о части свойств раскладки, с которых нужно начинать разметку. Другие свойства родительского элемента Grid будут показаны далее.