Unatka.ru

Виртуальный офис VO

Раздел: Создание сайта html. Практика

Глава: css

CSS Grid. Родительский элемент. Свойства, имеющие отношение к содержимому контейнера

К ним относятся:

justify-items 

Выравнивает содержимое относительно вертикальной оси. Применяется ко всем элементам сетки.

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

justify-items : start | end | center | stretch;

По умолчанию используется stretch — равномерно заполняет все пространство;

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

| justify - items: start |

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

| justify - items: end |

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

| justify - items: center |

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

| justify - items: stretch | 

ВИД:

Свойство justify-items

1
.examplegrid {display : grid;}
3
4
justify-items: start;
6
7
8
9

1
.examplegrid1 {display : grid;}
3
4
justify-items: center;
6
7
8
9

1
.examplegrid2 {display : grid;}
3
4
justify-items: end;
6
7
8
9

1
.examplegrid3 {display : grid;}
3
4
justify-items: stretch;
6
7
grid-gap
9

КОД:

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

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

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

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

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

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

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

<div class="examplegrid">

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

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

  <div>
    <strong>3</strong>
  </div>

   <div>4</div>
   <div>
     <code>
       justify-items: start;
     </code>
   </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>
    <code>
      justify-items: center;
    </code>
  </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>
     <code>
       justify-items: end;
     </code>
   </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>
    <code>
      justify-items: stretch;
    </code>
  </div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      grid-gap
    </code>
  </div>
  <div>9</div>

</div>

align - items 

Выравнивает содержимое относительно горизонтальной оси. Применяется ко всем элементам сетки.

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

align - items : start | end | center | stretch;

По умолчанию используется stretch;

start выравнивает содержимое по верхней части ячейки:

| align - items: start |

end выравнивает содержимое по нижней части ячейки:

| align - items: end |

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

| align - items: center |

stretch заполняет всю высоту ячейки:

| align - items: stretch | 

ВИД:

Свойство align-items

1
.examplegrid {display : grid;}
3
4
justify-items: start;
align-items: start;
6
7
8
9

1
.examplegrid1 {display : grid;}
3
4
justify-items: center;
align-items: end;
6
7
8
9

1
.examplegrid2 {display : grid;}
3
4
justify-items: end;
align-items: center;
6
7
8
9

1
.examplegrid3 {display : grid;}
3
4
justify-items: stretch;
align-items: stretch;
6
7
grid-gap
9

КОД:

<meta charset="utf-8">
<style>
 .examplegrid4, 
 .examplegrid5, 
 .examplegrid6, 
 .examplegrid7  {
    border: dotted 1px red;
    font-size: 12px;
   } 

 .examplegrid4  {
   display : grid;
   grid-template-columns: 30% 30%  30%;
   grid-template-rows: 10em 5em 10em;
   justify-items: start;
   align-items: start; 
  } 

 .examplegrid5  {
    display : grid;
    grid-template-columns: repeat(2,40%) auto;
    grid-template-rows: 10em 5em 10em; 
    justify-items: center; 
    align-items: end;
  }

 .examplegrid6  {
    display : grid;
    grid-template-columns: 1fr 2fr  3fr;
    grid-template-rows: 10em 5em 10em;
    justify-items: end;
    align-items: center; 
  }

 .examplegrid7  {
    display : grid;
    grid-template-columns: 2fr 250px  1fr;
    grid-template-rows: 10em 5em 10em; 
    grid-gap: 10px;
    justify-items: stretch; 
    align-items: stretch;
  } 

 .examplegrid4 div, 
 .examplegrid5 div, 
 .examplegrid6 div, 
 .examplegrid7 div {
    border: dotted 2px green;
  }
 
</style>

<h4>Свойство align-items</h4>

<div class="examplegrid4">

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

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

  <div>
    <strong>3</strong>
  </div>

   <div>4</div>
   <div>
     <code>
       justify-items: start;
     </code>
     <br>
     <code>
       align-items: start;
     </code>
   </div>
   <div>6</div>

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

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

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

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

  <div>3</div>

  <div>4</div>
  <div>
    <code>
      justify-items: center;
    </code>
    <br>
    <code>
      align-items: end;
    </code>
    </div>
    <div>6</div>

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

</div>

<br>
<div class="examplegrid6">

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

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

  <div>3</div>

  <div>4</div>
  <div>
    <code>
      justify-items: end;
    </code>
    <br>
    <code>
      align-items: center;
    </code>
    </div>
    <div>6</div>

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

</div>

<br>
<div class="examplegrid7">

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

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

  <div>3</div>

  <div>4</div>
  <div>
    <code>
      justify-items: stretch;
    </code>
    <br>
    <code>
      align-items: stretch;
    </code>
  </div>
  <div>6</div>

  <div>7</div>
  <div>
    <code>
      grid-gap
    </code>
  </div>
  <div>9</div>

</div>

В следующей статье рассмотрим какие свойства применять, когда сетка контейнера заведомо меньше страницы.

Опубликовано впервые: 2024-12-14

Хочу оставить комментарий
X

Политика ...обработки ПД веб-сайта unatka.ru и его поддоменов



Посмотреть комментарии

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

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

Комментариев пока нет

Этот сайт использует сервис веб-аналитики Яндекс Метрика, предоставляемый компанией ООО «ЯНДЕКС».

Чтобы сохранить конфиденциальность персональных данных, Условия использования сервиса Яндекс Метрика запрещают передавать идентификационную информацию в Метрику.

Подробнее