Создаём сайт с помощью CSS Grid

Grid — сетка из строк и колонок. С ней сложные раскладки делаются в пару строк.

📋 Заданий: 4✅ С автопроверкой: 3✨ Новых: 3

🔲Задания

Сайт на grid по макету

сложнов VS Code

Сверстай сайт по картинке с помощью CSS Grid. Макет можно открыть в Figma или скачать для Adobe XD.

🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!

Сетка 3 × 3

легконовоеавтопроверка

Расставь 9 клеток .cell сеткой 3 на 3: у .grid — display: grid, grid-template-columns: repeat(3, 1fr) и промежутки gap: 10px.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .cell { background-color: #ffd23f; font-size: 30px; text-align: center; padding: 20px; border-radius: 8px; }
    </style>
</head>
<body>
    <div class="grid">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
        <div class="cell">5</div>
        <div class="cell">6</div>
        <div class="cell">7</div>
        <div class="cell">8</div>
        <div class="cell">9</div>
    </div>
</body>
</html>

Раскладка через grid-template-areas

средненовоеавтопроверка

Разложи страницу по областям: шапка сверху на всю ширину, ниже меню (200px) и контент, внизу подвал на всю ширину. Используй grid-template-areas и grid-area.

Подсказка

.page {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "header header"
        "aside  main"
        "footer footer";
}
header { grid-area: header; }

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { margin: 0; font-family: sans-serif; }
        .page > * { padding: 20px; color: white; font-size: 20px; }
        .page {
            display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-areas:
                "header header"
                "aside main"
                "footer footer";
        }
        header { background-color: #6d4aff; grid-area: header; }
        aside { background-color: #ff4d8d; grid-area: aside; }
        main { background-color: #19b8a6; height: 200px; grid-area: main; }
        footer { background-color: #1f1b3d; grid-area: footer; }
    </style>
</head>
<body>
    <div class="page">
        <header>Шапка</header>
        <aside>Меню</aside>
        <main>Контент</main>
        <footer>Подвал</footer>
    </div>
</body>
</html>

Большая плитка

сложноновоеавтопроверка

В галерее из 6 плиток первая плитка .big должна занимать две колонки и две строки: grid-column: span 2 и grid-row: span 2. У сетки 3 колонки по 100px и строки по 100px.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .grid { display: grid; grid-template-columns: repeat(3, 100px); grid-auto-rows: 100px; gap: 8px; }
        .tile { background-color: #19b8a6; border-radius: 8px; }
        .big { background-color: #ff4d8d; font-size: 60px; color: white; display: flex; justify-content: center; align-items: center;
               grid-column: span 2; grid-row: span 2; }
    </style>
</head>
<body>
    <div class="grid">
        <div class="tile big">★</div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
    </div>
</body>
</html>

🎨Программы для макетов

Figma и Adobe XD — удобные программы для создания макетов. Потренироваться с grid можно в игре CSS Grid Garden.

🔗Полезные ссылки

Что почитать

📚Документация — CSS Griddeveloper.mozilla.org 📚Всё о CSS Gridlearncssgrid.com 📚Grid или Flexbox?htmlbook.ru

Где потренироваться

🎮CSS Grid Garden — тренажёрcssgridgarden.com