<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Пример верстки формы на CSS Grid #4

Пример верстки формы на CSS Grid #4

На этом уроке разберем, как верстать форму на CSS Grid. У нас будет не совсем типичная форма, когда поля находятся в одной колонке друг под другом. В нашем примере, поля формы стоят в одном ряду и занимают 4 колонки.


Пример верстки формы на CSS Grid.

HTML разметка

По макету видно, что форма имеет ограниченную ширину, так как по краям браузера остается свободное пространство. Сначала создадим секцию с классом form_section, внутри которой будет контейнер и сама форма.

<section class="form_section">
  <div class="container">

    <form class="grid">
      <div><input type="text" name="mailing" placeholder="Mailing"></div>
      <div><input type="text" name="email" placeholder="Email"></div>
      <div><input type="text" name="phone" placeholder="Phone"></div>
      <div><button class="button">Submit</button></div>
    </form>
  </div>
</section>

Построение CSS сетки

Достаточно задать тегу form класс grid для построения сетки. Далее равномерно распределим элементы формы на колонки, задав свойству grid-template-columns 4 колонки по 1 фракции каждая. Теперь все поля формы встали в один ряд и имеют одинаковую ширину.

.form_section {
    padding: 30px 0; / * отступы сверху и снизу * /
    background-color: #96532c; / * цвет фона секции * /
}

.form_section form {
    grid-gap: 20px; / * расстояние между колонками * /
    grid-template-columns: repeat(4, 1fr); / * разбивка на колонки * /
}

.container {
    display: grid; / * отобразить как сетку * /
    max-width: 1200px; / * ограничивает ширину формы * /
    margin: auto; / * автоматически выравнивает по центру * /
    padding: 0 20px; / * отступы сверху и снизу * /
}

.grid {
    display: grid; / * отобразить как сетку * /
}

Делаем адаптив

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

На ширине устройств менее 768 пикселей уменьшаем количество колонок в ряду до двух вместо четырех. Для этого внесем изменения в свойство grid-template-columns - пропишем две фракции. Сетка сразу перестроилась на две колонки в ряду, соответственно две последние колонки перешли на второй ряд.

@media only screen and (max-width:768px) {
    .formsection form {
        grid-template-columns: 1fr 1fr;
    }


Пример верстки формы на CSS Grid.

На отметке меньше 480 пикселей сделаем одну фракцию. В результате в одном ряду останется только одна колонка.

@media only screen and (max-width:480px) {
    .formsection form {
        grid-template-columns: 1fr;
    }


Пример верстки формы на CSS Grid.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.