Выравнивание в Grid: justify-content и align-content: Тренажер CSS

Выравнивание по началу строки

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 300px; /* Ширина больше суммы ширин элементов и отступов */
  height: 100px;
  border: 1px solid #ccc;
  input1: start; /* Выровняйте элементы по началу строки */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 300px; /* Ширина больше суммы ширин элементов и отступов */
  height: 100px;
  border: 1px solid #ccc;
  input1: start; /* Выровняйте элементы по началу строки */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Для выравнивания элементов вдоль строки (горизонтальной оси) используется свойство `justify-content`. Чтобы прижать элементы к началу, используйте значение `start`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание по центру строки

Ваша задача — разместить grid-элементы точно по центру контейнера вдоль горизонтальной оси. Используйте соответствующее значение для свойства выравнивания.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 320px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 320px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

HTML

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
</div>

Для центрирования элементов вдоль строки (горизонтальной оси) используйте свойство `justify-content` со значением `center`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание по концу строки

Расположите все элементы сетки так, чтобы они были прижаты к концу (правому краю) строки контейнера. Свободное пространство должно остаться слева.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 280px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #ff9800;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 280px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #ff9800;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Чтобы выровнять элементы по концу строки (горизонтальной оси), примените свойство `justify-content` со значением `end`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Распределение пространства между элементами (горизонтально)

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 350px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #e91e63;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 350px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #e91e63;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Для такого распределения пространства вдоль строки используйте `justify-content` со значением `space-between`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Распределение пространства вокруг элементов (горизонтально)

Измените выравнивание так, чтобы свободное пространство по горизонтали распределилось *вокруг* каждого элемента равномерно. Это значит, что у краев контейнера будет половина того пространства, что между элементами.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 55px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 340px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #673ab7;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 55px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 340px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #673ab7;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

HTML

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

Для равномерного распределения пространства вокруг элементов вдоль строки используйте `justify-content` со значением `space-around`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Равномерное распределение пространства (горизонтально)

Расположите элементы так, чтобы пространство между ними, а также между крайними элементами и границами контейнера, было абсолютно одинаковым по горизонтали.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 80px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 360px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #00bcd4;
  color: white;
  padding: 25px;
  text-align: center;
  font-size: 18px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 80px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 360px;
  height: 100px;
  border: 1px solid #ccc;
  justify-content: input1;
}

.grid-item {
  background-color: #00bcd4;
  color: white;
  padding: 25px;
  text-align: center;
  font-size: 18px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

Для абсолютно одинаковых отступов между элементами и по краям контейнера вдоль строки используйте `justify-content` со значением `space-evenly`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание строк по началу контейнера

Теперь сосредоточимся на вертикальном выравнивании. Расположите строки сетки так, чтобы они были прижаты к верхнему краю контейнера. В контейнере есть дополнительное пространство по вертикали.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px;
  height: 250px; /* Высота больше суммы высот строк и отступов */
  border: 1px solid #ccc;
  input1: start; /* Выровняйте строки по началу */
}

.grid-item {
  background-color: #8bc34a;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px;
  height: 250px; /* Высота больше суммы высот строк и отступов */
  border: 1px solid #ccc;
  input1: start; /* Выровняйте строки по началу */
}

.grid-item {
  background-color: #8bc34a;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Для выравнивания строк сетки (как группы) вдоль блочной (вертикальной) оси используется свойство `align-content`. Чтобы прижать строки к началу (верху), используйте значение `start`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Сгруппируйте строки сетки и разместите их по центру контейнера вдоль вертикальной оси. Свободное пространство должно быть равномерно распределено сверху и снизу.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 250px;
  height: 200px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #ffc107;
  color: #333;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 250px;
  height: 200px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #ffc107;
  color: #333;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

HTML

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

Для центрирования строк сетки по вертикали используйте свойство `align-content` со значением `center`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Прижмите все строки сетки к нижнему краю контейнера. Свободное пространство должно остаться сверху.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 40px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 150px;
  height: 220px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #795548;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 40px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 150px;
  height: 220px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #795548;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">Row 1</div>
  <div class="grid-item">Row 2</div>
</div>

Чтобы выровнять строки сетки по концу (низу) контейнера, примените свойство `align-content` со значением `end`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Распределение пространства между строками

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 40px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #607d8b;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 40px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #607d8b;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Для такого распределения пространства между строками используйте `align-content` со значением `space-between`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Распределение пространства вокруг строк

Измените вертикальное выравнивание так, чтобы свободное пространство распределилось *вокруг* каждой строки сетки равномерно. У верхнего и нижнего краев контейнера будет половина того пространства, что между строками.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 180px;
  height: 280px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #3f51b5;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 180px;
  height: 280px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #3f51b5;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 16px;
}

HTML

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
</div>

Для равномерного распределения пространства вокруг строк используйте `align-content` со значением `space-around`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Равномерное распределение пространства между строками

Расположите строки сетки так, чтобы пространство между ними, а также между крайними строками и границами контейнера по вертикали, было абсолютно одинаковым.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 45px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 220px;
  height: 320px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #009688;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 45px);
  gap: 15px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 220px;
  height: 320px;
  border: 1px solid #ccc;
  align-content: input1;
}

.grid-item {
  background-color: #009688;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Для абсолютно одинаковых вертикальных отступов между строками и по краям контейнера используйте `align-content` со значением `space-evenly`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Центрирование по обеим осям

Используйте оба свойства выравнивания (`justify-content` и `align-content`), чтобы разместить блок элементов точно по центру контейнера как по горизонтали, так и по вертикали.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(2, 50px);
  gap: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  input1: input2;
  input3: input4;
}

.grid-item {
  background-color: #4caf50;
  color: white;
  display: flex; /* Для центрирования текста внутри */
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(2, 50px);
  gap: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  input1: input2;
  input3: input4;
}

.grid-item {
  background-color: #4caf50;
  color: white;
  display: flex; /* Для центрирования текста внутри */
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Для центрирования по горизонтали используйте `justify-content: center;`. Для центрирования группы строк по вертикали используйте `align-content: center;`. Примените оба свойства к контейнеру.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание изображений по горизонтали (space-around)

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

CSS

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  background-color: #e3f2fd;
  padding: 15px;
  width: 340px;
  height: 150px;
  border: 1px solid #90caf9;
  input1: input2;
}

.image-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid #1e88e5;
}

                     .image-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  background-color: #e3f2fd;
  padding: 15px;
  width: 340px;
  height: 150px;
  border: 1px solid #90caf9;
  input1: input2;
}

.image-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid #1e88e5;
}

HTML

<div class="image-grid">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
</div>

Используйте `display: grid` для контейнера и `justify-content: space-around` для распределения пространства вокруг элементов по горизонтали.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание строк изображений по вертикали (space-between)

Расположите строки с изображениями так, чтобы первая строка была прижата к верху, последняя — к низу, а всё свободное пространство распределилось между ними.

CSS

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
  background-color: #fff3e0;
  padding: 10px;
  width: 250px;
  height: 300px; /* Высота контейнера больше содержимого */
  border: 1px solid #ffcc80;
  input1: input2;
}

.image-grid img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border: 2px solid #ffa726;
}

                     .image-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
  background-color: #fff3e0;
  padding: 10px;
  width: 250px;
  height: 300px; /* Высота контейнера больше содержимого */
  border: 1px solid #ffcc80;
  input1: input2;
}

.image-grid img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border: 2px solid #ffa726;
}

HTML

<div class="image-grid">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 6">
  <img src="https://naytikurs.ru/img/7.png" alt="Image 7">
  <img src="https://naytikurs.ru/img/8.png" alt="Image 8">
</div>

Используйте `display: grid` для контейнера. Для вертикального распределения пространства между строками примените `align-content: space-between`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку