Создание макета блога на CSS Grid: Тренажер CSS

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

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

Список тем

Основы Grid: Создание контейнера сетки

Начнем с основ. У вас есть простой HTML-макет с несколькими блоками (header, main, footer). Ваша задача - превратить родительский div с классом 'blog-container' в grid-контейнер, используя соответствующее CSS свойство.

CSS

.blog-container {
  input1: grid;
  border: 1px solid #ccc;
  max-width: 370px; /* Ограничение для iframe */
  margin: 10px auto;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  input1: grid;
  border: 1px solid #ccc;
  max-width: 370px; /* Ограничение для iframe */
  margin: 10px auto;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

Чтобы элемент стал grid-контейнером, ему необходимо задать свойство 'display' со значением 'grid'. Это позволит дочерним элементам располагаться в соответствии с правилами сетки.

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

Результат

Сообщения

Выполнить

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

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

Определение колонок сетки

Теперь, когда у нас есть grid-контейнер, давайте определим колонки. Задайте для контейнера '.blog-container' две колонки: первая должна занимать 1 фракцию доступного пространства, а вторая - фиксированные 100px.

CSS

.blog-container {
  display: grid;
  input1: 1fr 100px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  input1: 1fr 100px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>
<!-- Добавили aside для наглядности колонок -->

Для определения колонок сетки используется свойство 'grid-template-columns'. Значения могут быть разными: фиксированные (px), процентные (%), фракционные (fr) или автоматические (auto). В данном случае нужно использовать 'fr' и 'px'.

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

Результат

Сообщения

Выполнить

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

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

Определение строк сетки

Мы определили колонки, теперь зададим строки. Установите для контейнера '.blog-container' три строки: первая высотой 50px, вторая - автоматической высоты ('auto'), третья - 60px.

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  input1: 50px auto 60px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
}

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  input1: 50px auto 60px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
}

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>
<!-- Порядок элементов важен для авто-размещения -->

Аналогично колонкам, строки определяются свойством 'grid-template-rows'. Используйте значения в пикселях (px) и ключевое слово 'auto' для автоматического определения высоты по содержимому.

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

Результат

Сообщения

Выполнить

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

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

Размещение элементов по номерам линий

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

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px; /* Для наглядности */
}

header {
  input1: 1 / 3;
  background-color: lightblue;
  border: 1px dashed blue;
  padding: 10px;
}

main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

main { background-color: lightcoral; }
aside { background-color: lightgreen; }
footer { background-color: lightgray; }

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px; /* Для наглядности */
}

header {
  input1: 1 / 3;
  background-color: lightblue;
  border: 1px dashed blue;
  padding: 10px;
}

main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

main { background-color: lightcoral; }
aside { background-color: lightgreen; }
footer { background-color: lightgray; }

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

Для управления размещением элемента по колонкам используется свойство 'grid-column'. Оно принимает два значения через слеш (/): номер начальной линии и номер конечной линии. Линии нумеруются с 1.

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

Результат

Сообщения

Выполнить

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

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

Использование grid-template-areas

Более наглядный способ разметки - использование именованных областей. Задайте для '.blog-container' шаблон областей, где 'header' занимает всю первую строку, 'main' - левую часть второй строки, 'sidebar' - правую часть второй строки, а 'footer' - всю третью строку.

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  input1: 
    "header header"
    "main sidebar"
    "footer footer";
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main { grid-area: main; background-color: lightcoral; }
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  input1: 
    "header header"
    "main sidebar"
    "footer footer";
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main { grid-area: main; background-color: lightcoral; }
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

Используйте свойство 'grid-template-areas'. В значении строками в кавычках опишите структуру сетки, используя имена областей. Каждое имя соответствует ячейке. Точка (.) используется для пустой ячейки.

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

Результат

Сообщения

Выполнить

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

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

Назначение элементам именованных областей

Мы определили шаблон областей ('header', 'main', 'sidebar', 'footer') в прошлом задании. Теперь нужно связать HTML-элементы с этими областями. Назначьте элементу 'main' соответствующую область сетки.

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main {
  input1: main;
  background-color: lightcoral;
}
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main {
  input1: main;
  background-color: lightcoral;
}
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

Чтобы разместить элемент в именованной области сетки, используйте свойство 'grid-area' для этого элемента и укажите имя области, которое вы определили в 'grid-template-areas'.

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

Результат

Сообщения

Выполнить

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

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

Добавление отступов между ячейками (Gap)

Сейчас элементы сетки прижаты друг к другу. Добавьте отступы (промежутки) размером 10px между строками и колонками сетки в контейнере '.blog-container'.

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  input1: 10px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main { grid-area: main; background-color: lightcoral; }
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: 50px auto 60px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  input1: 10px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header { grid-area: header; background-color: lightblue; }
main { grid-area: main; background-color: lightcoral; }
aside { grid-area: sidebar; background-color: lightgreen; }
footer { grid-area: footer; background-color: lightgray; }

header, main, aside, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

Для создания отступов между ячейками сетки используется свойство 'gap' (или его псевдонимы 'grid-gap'). Оно может принимать одно значение (для строк и колонок) или два (первое для строк, второе для колонок).

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

Результат

Сообщения

Выполнить

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

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

Объединение ячеек (Span)

Иногда нужно, чтобы элемент занимал несколько ячеек. Давайте изменим макет: уберите 'sidebar' из HTML и сделайте так, чтобы 'main' занимал обе колонки во второй строке, используя ключевое слово 'span'.

CSS

.blog-container {
  display: grid;
  grid-template-columns: 1fr 100px; /* Колонки остаются */
  grid-template-rows: 50px auto 60px;
  gap: 10px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header {
  grid-column: 1 / span 2; /* Занимает 2 колонки */
  background-color: lightblue;
}

main {
  grid-column: 1 / input1 2; /* Должен занять 2 колонки */
  background-color: lightcoral;
}

footer {
  grid-column: 1 / span 2; /* Занимает 2 колонки */
  background-color: lightgray;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

                     .blog-container {
  display: grid;
  grid-template-columns: 1fr 100px; /* Колонки остаются */
  grid-template-rows: 50px auto 60px;
  gap: 10px;
  border: 1px solid #ccc;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
}

header {
  grid-column: 1 / span 2; /* Занимает 2 колонки */
  background-color: lightblue;
}

main {
  grid-column: 1 / input1 2; /* Должен занять 2 колонки */
  background-color: lightcoral;
}

footer {
  grid-column: 1 / span 2; /* Занимает 2 колонки */
  background-color: lightgray;
}

header, main, footer {
  border: 1px dashed blue;
  padding: 10px;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content Spanning Across</main>
  <footer>Footer</footer>
</div>
<!-- Sidebar убран -->

В свойствах 'grid-column' или 'grid-row' можно использовать ключевое слово 'span' вместе с числом, чтобы указать, сколько колонок или строк должен занять элемент, начиная от его стартовой линии.

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

Результат

Сообщения

Выполнить

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

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

Адаптивные колонки с auto-fit и minmax

CSS Grid отлично подходит для создания адаптивных галерей. Внутри секции 'main' есть блок '.gallery'. Сделайте так, чтобы он отображал элементы в виде сетки, где колонки автоматически подстраиваются под доступную ширину ('auto-fit'), при этом минимальная ширина колонки 100px, а максимальная - 1 фракция ('1fr').

CSS

.blog-container {
  /* Стили контейнера остаются для контекста */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
  border: 1px solid #ccc;
}

header, footer {
  background-color: lightgray; 
  padding:10px; 
  border: 1px dashed blue;
}
main {
  background-color: lightcoral;
  padding: 10px;
  border: 1px dashed blue;
}

.gallery {
  display: grid;
  input1: repeat(input2, minmax(100px, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid gray;
}

                     .blog-container {
  /* Стили контейнера остаются для контекста */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
  border: 1px solid #ccc;
}

header, footer {
  background-color: lightgray; 
  padding:10px; 
  border: 1px dashed blue;
}
main {
  background-color: lightcoral;
  padding: 10px;
  border: 1px dashed blue;
}

.gallery {
  display: grid;
  input1: repeat(input2, minmax(100px, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid gray;
}

HTML

<div class="blog-container">
  <header>Blog Header</header>
  <main>
    Main Content
    <div class="gallery">
      <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 4">
      <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
    </div>
  </main>
  <footer>Blog Footer</footer>
</div>

Используйте 'display: grid' для '.gallery'. В 'grid-template-columns' примените функцию 'repeat()'. Внутри 'repeat()' используйте ключевое слово 'auto-fit' и функцию 'minmax(min_width, max_width)' для определения диапазона ширины колонок.

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

Результат

Сообщения

Выполнить

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

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

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

Иногда содержимое элемента меньше, чем сама ячейка сетки. Давайте выровняем заголовок ('header') и подвал ('footer') по центру их ячеек по вертикали и горизонтали.

CSS

.blog-container {
  display: grid;
  grid-template-rows: 80px auto 80px; /* Увеличим высоту для наглядности */
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
  border: 1px solid #ccc;
}

header, footer {
  background-color: lightblue;
  border: 1px dashed blue;
  padding: 10px;
  /* Добавим стили для центрирования содержимого */
  display: grid; /* Делаем сам header/footer grid-контейнером */
  input1: center; /* Центрируем содержимое */
}

main {
  background-color: lightcoral;
  padding: 10px;
  border: 1px dashed blue;
}

                     .blog-container {
  display: grid;
  grid-template-rows: 80px auto 80px; /* Увеличим высоту для наглядности */
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 370px;
  margin: 10px auto;
  min-height: 300px;
  border: 1px solid #ccc;
}

header, footer {
  background-color: lightblue;
  border: 1px dashed blue;
  padding: 10px;
  /* Добавим стили для центрирования содержимого */
  display: grid; /* Делаем сам header/footer grid-контейнером */
  input1: center; /* Центрируем содержимое */
}

main {
  background-color: lightcoral;
  padding: 10px;
  border: 1px dashed blue;
}

HTML

<div class="blog-container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

Для выравнивания содержимого *внутри* grid-элемента (если сам элемент является grid- или flex-контейнером) или для выравнивания самого элемента в ячейке используются свойства 'justify-items'/'align-items' (на контейнере) или 'justify-self'/'align-self' (на элементе). Для простого центрирования текста можно использовать 'text-align: center;', а для вертикального центрирования содержимого, если элемент не является flex/grid контейнером сам по себе, можно использовать 'display: grid' и 'place-items: center' на самом элементе.

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

Результат

Сообщения

Выполнить

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

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