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

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в выравнивании дочерних элементов внутри их ячеек сетки (grid area) с помощью свойств `justify-items` и `align-items`. Свойство `justify-items` управляет выравниванием по горизонтальной оси (оси строки), а `align-items` — по вертикальной оси (оси столбца). Вы будете изменять значения этих свойств, чтобы расположить элементы в начале, конце, по центру ячейки или растянуть их на всю доступную область.

Список тем

Горизонтальное выравнивание: Начало

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по началу горизонтальной оси */
  input1: input2;
}

.grid-item {
  background-color: #87CEEB;
  padding: 20px;
  text-align: center;
  width: 50px; /* Фиксированная ширина для наглядности */
  height: 50px; /* Фиксированная высота для наглядности */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по началу горизонтальной оси */
  input1: input2;
}

.grid-item {
  background-color: #87CEEB;
  padding: 20px;
  text-align: center;
  width: 50px; /* Фиксированная ширина для наглядности */
  height: 50px; /* Фиксированная высота для наглядности */
}

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-items` для контейнера сетки. Чтобы выровнять элементы по началу горизонтальной оси, установите значение `start`.

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

Результат

Сообщения

Выполнить

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

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

Вертикальное выравнивание: Центр

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 250px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по центру вертикальной оси */
  input1: input2;
}

.grid-item {
  background-color: #90EE90;
  padding: 15px;
  text-align: center;
  width: 60px; /* Фиксированная ширина */
  height: 40px; /* Фиксированная высота */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 250px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по центру вертикальной оси */
  input1: input2;
}

.grid-item {
  background-color: #90EE90;
  padding: 15px;
  text-align: center;
  width: 60px; /* Фиксированная ширина */
  height: 40px; /* Фиксированная высота */
}

HTML

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

Используйте свойство `align-items` для контейнера сетки. Чтобы выровнять элементы по центру вертикальной оси, установите значение `center`.

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

Результат

Сообщения

Выполнить

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

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

Горизонтальное выравнивание: Конец

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по концу горизонтальной оси */
  justify-items: input1;
}

.grid-item {
  background-color: #FFB6C1;
  padding: 10px;
  width: 80px; /* Фиксированная ширина */
  height: 30px; /* Фиксированная высота */
  text-align: center;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте элементы по концу горизонтальной оси */
  justify-items: input1;
}

.grid-item {
  background-color: #FFB6C1;
  padding: 10px;
  width: 80px; /* Фиксированная ширина */
  height: 30px; /* Фиксированная высота */
  text-align: center;
}

HTML

<div class="grid-container">
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Вертикальное выравнивание: Конец

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  /* Выровняйте элементы по концу вертикальной оси */
  align-items: input1;
}

.grid-item {
  background-color: #ADD8E6;
  padding: 20px;
  width: 40px; /* Фиксированная ширина */
  height: 60px; /* Фиксированная высота */
  text-align: center;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  /* Выровняйте элементы по концу вертикальной оси */
  align-items: input1;
}

.grid-item {
  background-color: #ADD8E6;
  padding: 20px;
  width: 40px; /* Фиксированная ширина */
  height: 60px; /* Фиксированная высота */
  text-align: center;
}

HTML

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

Примените свойство `align-items` со значением `end` к контейнеру сетки.

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

Результат

Сообщения

Выполнить

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

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

Полное центрирование

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 280px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Горизонтальное центрирование */
  input1: input2;
  /* Вертикальное центрирование */
  input3: input4;
}

.grid-item {
  background-color: #FFD700;
  padding: 15px;
  width: 70px; /* Фиксированная ширина */
  height: 45px; /* Фиксированная высота */
  text-align: center;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 280px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Горизонтальное центрирование */
  input1: input2;
  /* Вертикальное центрирование */
  input3: input4;
}

.grid-item {
  background-color: #FFD700;
  padding: 15px;
  width: 70px; /* Фиксированная ширина */
  height: 45px; /* Фиксированная высота */
  text-align: center;
}

HTML

<div class="grid-container">
  <div class="grid-item">Центр</div>
  <div class="grid-item">Центр</div>
  <div class="grid-item">Центр</div>
  <div class="grid-item">Центр</div>
</div>

Используйте `justify-items: center;` для горизонтального центрирования и `align-items: center;` для вертикального центрирования.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание в угол: Верхний правый

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 180px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выравнивание по правому краю */
  input1: end;
  /* Выравнивание по верхнему краю */
  input2: start;
}

.grid-item {
  background-color: #FFA07A;
  padding: 10px;
  width: 50px; /* Фиксированная ширина */
  height: 50px; /* Фиксированная высота */
  text-align: center;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 180px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выравнивание по правому краю */
  input1: end;
  /* Выравнивание по верхнему краю */
  input2: start;
}

.grid-item {
  background-color: #FFA07A;
  padding: 10px;
  width: 50px; /* Фиксированная ширина */
  height: 50px; /* Фиксированная высота */
  text-align: center;
}

HTML

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

Используйте `justify-items: end;` для выравнивания по правому краю (горизонтально) и `align-items: start;` для выравнивания по верхнему краю (вертикально).

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

Результат

Сообщения

Выполнить

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

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

Растягивание элементов

По умолчанию элементы в Grid растягиваются, чтобы заполнить ячейку. В этом примере для элементов задана фиксированная ширина и высота. Ваша задача — изменить свойства выравнивания так, чтобы элементы снова растягивались и заполняли всё доступное пространство ячейки по обеим осям.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Заставьте элементы растягиваться по горизонтали */
  justify-items: input1;
  /* Заставьте элементы растягиваться по вертикали */
  align-items: input2;
}

.grid-item {
  background-color: #DA70D6;
  /* Уберем фиксированные размеры, чтобы stretch работал */
  /* width: 50px; */
  /* height: 50px; */
  text-align: center;
  padding: 10px; /* Добавим padding для наглядности */
  border: 1px dashed black; /* Граница для видимости растяжения */
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Заставьте элементы растягиваться по горизонтали */
  justify-items: input1;
  /* Заставьте элементы растягиваться по вертикали */
  align-items: input2;
}

.grid-item {
  background-color: #DA70D6;
  /* Уберем фиксированные размеры, чтобы stretch работал */
  /* width: 50px; */
  /* height: 50px; */
  text-align: center;
  padding: 10px; /* Добавим padding для наглядности */
  border: 1px dashed black; /* Граница для видимости растяжения */
}

HTML

<div class="grid-container">
  <div class="grid-item">Растяни меня</div>
  <div class="grid-item">И меня</div>
</div>

Чтобы элементы растягивались по горизонтали, используйте `justify-items: stretch;`. Для растягивания по вертикали используйте `align-items: stretch;`. Это значения по умолчанию, но здесь их нужно указать явно, чтобы переопределить другие стили или просто для практики.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание изображений: Нижний левый угол

В ячейках сетки находятся изображения. Ваша задача — выровнять каждое изображение в нижний левый угол его ячейки. Изображения имеют фиксированный размер, меньший, чем размер ячейки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 140px); /* Задаем высоту строк */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Горизонтальное выравнивание */
  input1: input2;
  /* Вертикальное выравнивание */
  input3: input4;
}

.grid-item {
  background-color: #f0f0f0; /* Фон для наглядности ячейки */
}

.grid-item img {
  width: 50px;
  height: 50px;
  display: block; /* Убирает лишние отступы у img */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 140px); /* Задаем высоту строк */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Горизонтальное выравнивание */
  input1: input2;
  /* Вертикальное выравнивание */
  input3: input4;
}

.grid-item {
  background-color: #f0f0f0; /* Фон для наглядности ячейки */
}

.grid-item img {
  width: 50px;
  height: 50px;
  display: block; /* Убирает лишние отступы у img */
}

HTML

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

Используйте `justify-items: start;` для выравнивания по левому краю (горизонтально) и `align-items: end;` для выравнивания по нижнему краю (вертикально).

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

Результат

Сообщения

Выполнить

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

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