Основы Grid

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 31 из 43.

CSS Grid — это система макетов, которая позволяет легко создавать веб-страницы с использованием строк и столбцов. Она отлично подходит для создания сложных и адаптивных макетов без необходимости использования floats или сложного позиционирования. Кроме того, она работает во всех современных браузерах.

Для создания grid-контейнера используйте свойство display:

.container {
  display: grid;
}

Определите столбцы в вашей сетке с помощью grid-template-columns с использованием единиц px или fr (фракций):

/* Это создает три столбца, где средний столбец занимает в два раза больше места, чем два других. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Определите строки с помощью grid-template-rows. Используйте свойство gap для добавления пространства между элементами сетки.

/* Создает сетку с двумя строками: первая высотой 100px, вторая — 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте CSS-правило для класса с именем grid-container, которое:

Устанавливает свойство display для создания сетки (grid)
Создает три колонки равной ширины, используя единицу измерения fr
Создает две строки: первую высотой 150px и вторую высотой 250px
Добавляет промежуток (gap) в 20px между всеми элементами сетки

Напишите только CSS-код для класса grid-container.

Шпаргалка

CSS Grid — это система макета для создания веб-страниц с использованием строк и столбцов. Чтобы создать сеточный контейнер, используйте display: grid:

.container {
  display: grid;
}

Определите столбцы с помощью grid-template-columns, используя единицы измерения px или fr (фракции):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три столбца, средний в два раза шире */
}

Определите строки с помощью grid-template-rows и добавьте отступы с помощью gap:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Две строки с определенной высотой */
  gap: 20px; /* Расстояние между элементами сетки */
}

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.