rm -r

🚀 Веб-разработка с нуля: Урок 8

Привет, будущие разработчики! 👋
В прошлом уроке мы углубились в Flexbox и создали адаптивный макет. Сегодня мы познакомимся с CSS Grid — мощным инструментом для создания сложных и гибких макетов.

📌 Что такое CSS Grid?
CSS Grid — это система для создания двумерных макетов. В отличие от Flexbox, который работает в одном направлении (ряд или колонка), Grid позволяет управлять как строками, так и столбцами одновременно.

🛠 Основы CSS Grid:
1. Создание сетки:
Используйте свойство display: grid; для контейнера.
2. Определение столбцов и строк:
- grid-template-columns — задает количество и размер столбцов.
- grid-template-rows — задает количество и размер строк.
3. Размещение элементов:
- grid-column и grid-row — определяют, где будет расположен элемент.

📝 Практика:
Давайте создадим простой макет с использованием CSS Grid.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
    </div>
</body>
</html>

2. Добавьте стили с CSS Grid в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 столбца */
    grid-template-rows: repeat(2, 150px); /* 2 строки */
    gap: 10px; /* Расстояние между элементами */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-1 {
    grid-column: 1 / 3; /* Занимает первые два столбца */
}

.item-2 {
    grid-column: 3 / 4; /* Занимает третий столбец */
    grid-row: 1 / 3; /* Занимает две строки */
}

.item-3 {
    grid-column: 1 / 2; /* Занимает первый столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

.item-4 {
    grid-column: 2 / 3; /* Занимает второй столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: auto; /* Автоматическая высота строк */
    }

    .item {
        grid-column: 1 / 2; /* Все элементы занимают один столбец */
        grid-row: auto; /* Автоматическое размещение строк */
    }
}

3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как элементы адаптируются под размер экрана, создавая красивый и функциональный макет! 📱💻

👉 В следующем уроке:
Мы углубимся в изучение CSS Grid и создадим более сложные макеты.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer

6 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 9

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с CSS Grid и создали простой макет. Сегодня мы углубимся в изучение Grid и создадим более сложный и функциональный макет, который можно использовать для реальных проектов.

📌 Что нового мы изучим?
1. Именованные области:
С помощью grid-template-areas можно задавать именованные области для элементов.
2. Автоматическое размещение:
Свойство grid-auto-flow управляет тем, как элементы заполняют сетку.
3. Минимальная и максимальная высота строк:
Используйте minmax() для гибкости строк и столбцов.

📝 Практика:
Давайте создадим макет страницы с шапкой, боковой панелью, основным содержимым и футером.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">Шапка</header>
        <aside class="sidebar">Боковая панель</aside>
        <main class="content">Основное содержимое</main>
        <footer class="footer">Футер</footer>
    </div>
</body>
</html>

2. Добавьте стили с CSS Grid в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Боковая панель и основное содержимое */
    grid-template-rows: 80px 1fr 60px; /* Шапка, содержимое, футер */
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px; /* Расстояние между элементами */
    height: 100vh; /* На всю высоту экрана */
    padding: 10px;
}

.header {
    grid-area: header;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
}

.sidebar {
    grid-area: sidebar;
    background-color: #333;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

.content {
    grid-area: content;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.2em;
}

.footer {
    grid-area: footer;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: 80px auto 1fr 60px; /* Автоматическая высота для боковой панели */
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
    }
}

3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как макет адаптируется под разные устройства, сохраняя свою структуру! 📱💻

👉 В следующем уроке:
Мы начнем изучать JavaScript более глубоко и добавим интерактивности на наш сайт.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer

7 views06:03

About

Blog

Apps

Platform