Комбинирование Grid и Flexbox: Тренажер CSS

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

Эта серия заданий посвящена совместному использованию CSS Grid Layout и Flexbox Layout для создания сложных и адаптивных макетов. Вы будете практиковаться в применении Grid для общей структуры страницы или компонента, а Flexbox — для выравнивания и распределения элементов внутри ячеек Grid. Задания построены от простого к сложному, начиная с базовых комбинаций и заканчивая более комплексными сценариями вложенных макетов. Вам предстоит заполнять пропущенные свойства и значения в CSS коде, чтобы достичь нужного визуального результата, отображаемого в iframe.

Список тем

Базовое сочетание: Grid-контейнер с Flex-элементом

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

CSS

.container {
  input1: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.flex-item {
  input2: flex;
  gap: 5px; /* Пространство между внутренними элементами */
}

.inner {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #999;
}

                     .container {
  input1: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.flex-item {
  input2: flex;
  gap: 5px; /* Пространство между внутренними элементами */
}

.inner {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #999;
}

HTML

<div class="container">
  <div class="item">Элемент 1 (Grid)</div>
  <div class="item flex-item">
    <div class="inner">A</div>
    <div class="inner">B</div>
    <div class="inner">C</div>
  </div>
</div>

Для основного контейнера `.container` используйте свойство `display` со значением `grid`. Чтобы определить две равные колонки, используйте `grid-template-columns`. Для элемента `.flex-item` также используйте свойство `display`, но со значением `flex`, чтобы его дочерние элементы (`.inner`) выстроились в строку.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание Flex-элементов внутри Grid-ячейки

Используйте Grid для создания сетки 2x1. Вторая ячейка сетки содержит несколько элементов. Ваша задача — сделать вторую ячейку Flex-контейнером и выровнять её дочерние элементы по центру как по горизонтали, так и по вертикали. Заполните пропуски, отвечающие за тип макета и выравнивание.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  min-height: 150px; /* Для наглядности вертикального выравнивания */
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.item-2 {
  display: flex;
  input1: center; /* Горизонтальное выравнивание */
  input2: center; /* Вертикальное выравнивание */
  gap: 5px;
}

.inner {
  background-color: #d0d0d0;
  padding: 8px;
  border: 1px solid #999;
}

                     .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  min-height: 150px; /* Для наглядности вертикального выравнивания */
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.item-2 {
  display: flex;
  input1: center; /* Горизонтальное выравнивание */
  input2: center; /* Вертикальное выравнивание */
  gap: 5px;
}

.inner {
  background-color: #d0d0d0;
  padding: 8px;
  border: 1px solid #999;
}

HTML

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item item-2">
    <div class="inner">A</div>
    <div class="inner">B</div>
    <div class="inner">C</div>
  </div>
</div>

Элементу `.item-2` нужно задать `display: flex`. Для горизонтального выравнивания дочерних элементов используйте свойство `justify-content` со значением `center`. Для вертикального выравнивания примените `align-items` со значением `center`.

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

Результат

Сообщения

Выполнить

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

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

Grid-элемент, занимающий несколько колонок, с Flex-содержимым

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

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.spanned-item {
  input1: span 2; /* Занять две колонки */
  display: flex;
  input2: space-between; /* Распределить внутренние элементы */
  align-items: center;
}

.inner {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #999;
}

                     .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.item {
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #e9e9e9;
}

.spanned-item {
  input1: span 2; /* Занять две колонки */
  display: flex;
  input2: space-between; /* Распределить внутренние элементы */
  align-items: center;
}

.inner {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #999;
}

HTML

<div class="container">
  <div class="item spanned-item">
    <div class="inner">Лево</div>
    <div class="inner">Право</div>
  </div>
  <div class="item">Колонка 3</div>
</div>

Для элемента `.spanned-item` используйте свойство `grid-column` со значением `span 2` или `1 / 3`, чтобы он занял две колонки. Затем задайте ему `display: flex`. Чтобы расположить внутренние элементы по краям, используйте `justify-content` со значением `space-between`.

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

Результат

Сообщения

Выполнить

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

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

Карточка товара: Grid для структуры, Flex для деталей

Создайте компонент карточки товара. Используйте Grid для разделения карточки на область изображения и область описания. В области описания используйте Flexbox, чтобы расположить заголовок, описание и кнопку "Купить" в столбец.

CSS

.card {
  input1: grid;
  grid-template-columns: 100px 1fr; /* Колонка для картинки и колонка для текста */
  gap: 15px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  max-width: 340px;
  align-items: start;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #eee;
}

.details {
  input2: flex;
  input3: column;
  /* Дополнительно можно задать min-height, чтобы space-between работал лучше */
  /* justify-content: space-between; */ 
}

.details h3 {
  margin: 0 0 5px 0;
}

.details p {
  margin: 0 0 10px 0;
  flex-grow: 1; /* Позволяет параграфу занять доступное место */
}

.details button {
  padding: 8px 12px;
  cursor: pointer;
  /* margin-top: auto; Альтернативный способ прижать кнопку к низу */
}

                     .card {
  input1: grid;
  grid-template-columns: 100px 1fr; /* Колонка для картинки и колонка для текста */
  gap: 15px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  max-width: 340px;
  align-items: start;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #eee;
}

.details {
  input2: flex;
  input3: column;
  /* Дополнительно можно задать min-height, чтобы space-between работал лучше */
  /* justify-content: space-between; */ 
}

.details h3 {
  margin: 0 0 5px 0;
}

.details p {
  margin: 0 0 10px 0;
  flex-grow: 1; /* Позволяет параграфу занять доступное место */
}

.details button {
  padding: 8px 12px;
  cursor: pointer;
  /* margin-top: auto; Альтернативный способ прижать кнопку к низу */
}

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/7.png" alt="Товар">
  <div class="details">
    <h3>Название товара</h3>
    <p>Краткое описание товара, которое может быть достаточно длинным.</p>
    <button>Купить</button>
  </div>
</div>

Для контейнера `.card` задайте `display: grid` и определите две колонки, например, `grid-template-columns: 100px 1fr;`. Для области описания `.details` установите `display: flex` и `flex-direction: column`. Чтобы кнопка прижалась к низу, можно использовать `margin-top: auto;` на кнопке или `justify-content: space-between;` на контейнере `.details`, если его высота фиксирована или ограничена.

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

Результат

Сообщения

Выполнить

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

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

Вложенные макеты: Grid внутри Flex, Flex внутри Grid

Создайте макет, где основной контейнер использует Flexbox для расположения двух блоков в ряд. Первый блок является Grid-контейнером с сеткой 2x2. Второй блок также Grid-контейнер, но один из его элементов является Flex-контейнером, выравнивающим свои элементы по центру.

CSS

.outer-container {
  input1: flex;
  gap: 15px;
  padding: 10px;
  border: 1px solid #999;
  background-color: #f0f0f0;
  height: 250px;
}

.block {
  border: 1px solid #666;
  padding: 10px;
  flex: 1; /* Блоки занимают равное пространство */
}

.grid-block-1 {
  input2: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.grid-block-2 {
  display: grid; /* Уже задано */
  grid-template-rows: auto 1fr; /* Первая строка авто, вторая занимает остаток */
  gap: 5px;
}

.grid-item {
  background-color: #e0e0e0;
  border: 1px solid #aaa;
  padding: 10px;
  text-align: center;
}

.nested-flex {
  input3: flex;
  input4: center;
  input5: center;
  gap: 5px;
  background-color: #c0c0c0;
}

.inner {
  background-color: #a0a0a0;
  padding: 5px;
  border: 1px solid #888;
}

                     .outer-container {
  input1: flex;
  gap: 15px;
  padding: 10px;
  border: 1px solid #999;
  background-color: #f0f0f0;
  height: 250px;
}

.block {
  border: 1px solid #666;
  padding: 10px;
  flex: 1; /* Блоки занимают равное пространство */
}

.grid-block-1 {
  input2: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.grid-block-2 {
  display: grid; /* Уже задано */
  grid-template-rows: auto 1fr; /* Первая строка авто, вторая занимает остаток */
  gap: 5px;
}

.grid-item {
  background-color: #e0e0e0;
  border: 1px solid #aaa;
  padding: 10px;
  text-align: center;
}

.nested-flex {
  input3: flex;
  input4: center;
  input5: center;
  gap: 5px;
  background-color: #c0c0c0;
}

.inner {
  background-color: #a0a0a0;
  padding: 5px;
  border: 1px solid #888;
}

HTML

<div class="outer-container">
  <div class="block grid-block-1">
    <div class="grid-item">G1</div>
    <div class="grid-item">G2</div>
    <div class="grid-item">G3</div>
    <div class="grid-item">G4</div>
  </div>
  <div class="block grid-block-2">
    <div class="grid-item">Заголовок</div>
    <div class="grid-item nested-flex">
      <div class="inner">F1</div>
      <div class="inner">F2</div>
    </div>
  </div>
</div>

Основному контейнеру `.outer-container` задайте `display: flex`. Первому блоку `.grid-block-1` задайте `display: grid` и `grid-template-columns: repeat(2, 1fr);`. Второму блоку `.grid-block-2` также задайте `display: grid`. Элементу `.nested-flex` внутри второго блока задайте `display: flex`, `justify-content: center` и `align-items: center`.

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

Результат

Сообщения

Выполнить

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

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

Центрирование элемента Grid с помощью Flexbox

Используйте Flexbox для центрирования Grid-контейнера на странице (или внутри родительского блока). Сам Grid-контейнер должен содержать сетку 3x1. Это частый приём, когда нужно отцентрировать блок с фиксированной или максимальной шириной.

CSS

.wrapper {
  input1: flex;
  input2: center;
  input3: center;
  min-height: 300px; /* Высота для вертикального центрирования */
  background-color: #f0f0f0;
  border: 1px dashed #999;
}

.grid-container {
  input4: grid;
  grid-template-columns: repeat(3, 80px); /* Три колонки фиксированной ширины */
  gap: 10px;
  padding: 15px;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
}

.grid-item {
  background-color: #d0d0d0;
  border: 1px solid #aaa;
  padding: 20px 10px;
  text-align: center;
}

                     .wrapper {
  input1: flex;
  input2: center;
  input3: center;
  min-height: 300px; /* Высота для вертикального центрирования */
  background-color: #f0f0f0;
  border: 1px dashed #999;
}

.grid-container {
  input4: grid;
  grid-template-columns: repeat(3, 80px); /* Три колонки фиксированной ширины */
  gap: 10px;
  padding: 15px;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
}

.grid-item {
  background-color: #d0d0d0;
  border: 1px solid #aaa;
  padding: 20px 10px;
  text-align: center;
}

HTML

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

Родительскому элементу `.wrapper` задайте `display: flex`, `justify-content: center` и `align-items: center`. Чтобы центрирование работало, у `.wrapper` должна быть задана высота (здесь `min-height`). Для элемента `.grid-container` установите `display: grid` и определите три колонки с помощью `grid-template-columns`.

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

Результат

Сообщения

Выполнить

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

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

Сложный макет: Шапка (Flex), Контент (Grid), Подвал (Flex)

Создайте базовую структуру страницы. Весь макет страницы управляется Flexbox, располагая шапку, основное содержимое и подвал в столбец. Основное содержимое (`main`) является Grid-контейнером, делящим пространство на две колонки (например, контент и сайдбар). Шапка и подвал используют Flexbox для выравнивания своих внутренних элементов.

CSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page-container {
  input1: flex;
  input2: column;
  min-height: 100%; /* Занимает всю высоту окна */
  width: 100%;
  max-width: 370px; /* Ограничение для iframe */
  margin: 0 auto;
  box-sizing: border-box;
}

header {
  background-color: #aadaff;
  padding: 10px;
  display: flex; /* Уже задано */
  input3: center; /* Выровнять элементы шапки по вертикали */
}

main {
  input4: 1; /* Занять доступное пространство */
  display: grid;
  grid-template-columns: 2fr 1fr; /* Контент и сайдбар */
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}

article {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ccc;
}

aside {
  background-color: #e9e9e9;
  padding: 15px;
  border: 1px solid #ccc;
}

footer {
  background-color: #aadaff;
  padding: 10px;
  text-align: center;
}

                     body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page-container {
  input1: flex;
  input2: column;
  min-height: 100%; /* Занимает всю высоту окна */
  width: 100%;
  max-width: 370px; /* Ограничение для iframe */
  margin: 0 auto;
  box-sizing: border-box;
}

header {
  background-color: #aadaff;
  padding: 10px;
  display: flex; /* Уже задано */
  input3: center; /* Выровнять элементы шапки по вертикали */
}

main {
  input4: 1; /* Занять доступное пространство */
  display: grid;
  grid-template-columns: 2fr 1fr; /* Контент и сайдбар */
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}

article {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ccc;
}

aside {
  background-color: #e9e9e9;
  padding: 15px;
  border: 1px solid #ccc;
}

footer {
  background-color: #aadaff;
  padding: 10px;
  text-align: center;
}

HTML

<div class="page-container">
  <header>
    Лого
  </header>
  <main>
    <article>Основной контент...</article>
    <aside>Сайдбар</aside>
  </main>
  <footer>
    Подвал
  </footer>
</div>

Для `body` (или `.page-container`) используйте `display: flex` и `flex-direction: column`. Чтобы `main` занимал все доступное вертикальное пространство, используйте `flex-grow: 1`. Для `main` задайте `display: grid` и `grid-template-columns` (например, `2fr 1fr`). Для `header` и `footer` используйте `display: flex` и свойства выравнивания, такие как `align-items` или `justify-content`.

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

Результат

Сообщения

Выполнить

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

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