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

В этой статье будут показаны свойства, которые помогут выровнять содержимое внутри контейнера когда сетка имеет фиксированный размер и заведомо меньше контейнера.

justify - content 

Выравнивает сетку относительно вертикальной оси. 

Может принимать следующие значения:

justify - content : start | end | center | stretch | space - around | space - between | space - evenly |;

start выравнивает сетку по левой стороне контейнера:

end выравнивает сетку по правой стороне контейнера:

center выравнивает сетку по центру контейнера:

stretch сетка заполняет всю ширину контейнера

space - around равные расстояния между элементами, отступы по краям равны половине расстояния между элементами

space - between равные расстояния между элементами, отступы по краям отсутствуют

space - evenly равные расстояния между элементами, отступы по краям равны расстоянию между элементами

align - content 

Выравнивает сетку относительно горизонтальной оси. 

Принимает следующие значения:

align - content : start | end | center | stretch | space - around | space - between | space - evenly |;

start выравнивает сетку по верхней стороне контейнера:

end выравнивает сетку по нижней стороне контейнера:

center выравнивает сетку по центру контейнера:

space - between равные расстояния по вертикали между элементами, отступы по краям отсутствуют

space - around равные расстояния по вертикали между элементами, отступы по краям равны половине расстояния между элементами;

space - evenly равные расстояния по вертикали между элементами, отступы по краям равны расстоянию между элементами;

Примеры:

ВИД:

КОД:

<meta charset="utf-8">
<style>
 .examplegrid, 
 .examplegrid1, 
 .examplegrid2, 
 .examplegrid3, 
 .examplegrid4,
 .examplegrid5, 
 .examplegrid6, 
 .examplegrid7, 
 .examplegrid8, 
 .examplegrid9, 
 .examplegrid10, 
 .examplegrid11 {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
  } 

 .examplegrid,
 .examplegrid1, 
 .examplegrid3, 
 .examplegrid4,
 .examplegrid5, 
 .examplegrid6, 
 .examplegrid7, 
 .examplegrid8, 
 .examplegrid9, 
 .examplegrid10 {
    display : grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em; 
  } 

 .examplegrid {
    justify-content: start; 
  }

 .examplegrid1 {
    justify-content: center; 
  }
 .examplegrid2 {
    display : grid;
    grid-gap: 5px;
    grid-template-columns: 10% 40% 10%;
    grid-template-rows: 10em 5em 10em;
    justify-content: stretch; 
  }
 .examplegrid3 {
    justify-content: end; 
  } 

 .examplegrid4 {
    justify-content: space-around; 
  } 

 .examplegrid5 {
    justify-content: space-between; 
  } 

 .examplegrid6 {
    justify-content: space-evenly; 
  }  
  
  .examplegrid7 {
    justify-content: end;
    align-content: end; 
  }  

  .examplegrid8 {
    justify-content: start;
    align-content: start; 
  }  

  .examplegrid9 {
    justify-content: start;
    align-content: center; 
  }  

  .examplegrid10 {
    justify-content: start;
    align-content: space-between; 
  } 

  .examplegrid div, 
  .examplegrid span,
  .examplegrid1 div, 
  .examplegrid2 div, 
  .examplegrid3 div, 
  .examplegrid4 div, 
  .examplegrid5 div, 
  .examplegrid6 div, 
  .examplegrid7 div, 
  .examplegrid8 div, 
  .examplegrid9 div, 
  .examplegrid10 div {
    border: dotted 2px green;
   }

  .examplegrid span, 
  .examplegrid1 span, 
  .examplegrid2 span, 
  .examplegrid3 span, 
  .examplegrid4 span, 
  .examplegrid5 span, 
  .examplegrid6 span, 
  .examplegrid7 span, 
  .examplegrid8 span, 
  .examplegrid9 span, 
  .examplegrid10 span {
    background-color: blue;
    width: 100%;
  }
 
</style>

<h4>Свойства justify-content</h4>

<div class="examplegrid">

  <span>
    <strong>1</strong>
  </span>

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

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

  <div>4</div>
  <div>
    <code>
      justify-content: start;
    </code>
  </div>
  <div>6</div>

  <div>7</div>
  <div>8</div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

  <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>
    <code>
      justify-content: center;
    </code>
  </div>
  <div>9</div>

</div>

<br>
<div class="examplegrid2">

  <span>
    <strong>1</strong>
  </span>

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

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

  <div>4</div>
  <div>
    <code>
      justify-content: stretch;
    </code>
  </div>
  <div>6</div>

  <div>7</div>
  <div>8</div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

  <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>
    <code>
      justify-content: end;
    </code>
  </div>
  <div>9</div>

</div>

<br>

<div class="examplegrid4">

  <span>
    <strong>1</strong>
  </span>

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

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

  <div>4</div>
  <div>
    <code>
      justify-content: space-around;
    </code>
  </div>
  <div>6</div>

  <div>7</div>
  <div>8</div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>repeat</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: space-between;
    </code>
  </div>
  <div>9</div>

</div>

<br>
<div class="examplegrid6">

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>fr</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: space-evenly;
    </code>
  </div>
  <div>9</div>

</div>

<br>
<h4>Свойства align-content</h4>
<div class="examplegrid7">

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>fr + px</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: end;
    </code>
    <br>
    <code>
      align-content: end;
    </code>
  </div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>fr + px</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: start;
    </code>
    <br>
    <code>
      align-content: start;
    </code>
  </div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>fr + px</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: start;
    </code>
    <br>
    <code>
      align-content: center;
    </code>
  </div>
  <div>9</div>

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

  <span>
    <strong>1</strong>
  </span>

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

  <div>3</div>

  <div>4</div>
  <div>fr + px</div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      justify-content: start;
    </code>
    <br>
    <code>
      align-content: space-between;
    </code>
  </div>
  <div>9</div>

</div>

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