ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

Адаптивный веб-дизайн - Вид сетки (grid-view)


Что такое вид сетки (grid-view)?

Многие веб-страницы основаны на сетке, что означает, что страница разделена на столбцы:


Использование вида сетки очень полезно при разработке веб-страниц. Это облегчает размещение элементов на странице.


Адаптивное сеточное представление часто имеет 12 столбцов и имеет общую ширину 100%, и будет уменьшаться и расширяться при изменении размера окна браузера.

Пример: Адаптивный вид сетки


Построение адаптивного вида сетки

Давайте построим адаптивный вид сетки.

Сначала убедитесь, что для всех элементов HTML свойство box-sizing установлено в border-box. Это гарантирует, что отступы и границы включены в общую ширину и высоту элементов.

Добавьте следующий код в CSS:

* {
  box-sizing: border-box;
}

Подробнее о свойстве box-sizing читайте в разделе CSS Box Sizing на нашем сайте.

В следующем примере показана простая адаптивная веб-страница с двумя столбцами.:

25%
75%

Пример

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}
Попробуйте сами »

Пример выше подходит, если веб-страница содержит только два столбца.

Однако мы хотим использовать адаптивный вид сетки с 12 столбцами, чтобы иметь больше контроля над веб-страницей.

Сначала необходимо рассчитать процент для одного столбца: 100% / 12 столбцов = 8,33%.

Затем мы создаем один класс для каждого из 12 столбцов, class="col-" и число, определяющее, сколько столбцов должен охватывать раздел:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Попробуйте сами »

Все эти столбцы должны быть плавающими по левой стороне и иметь отступ 15 пикселей:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Каждый ряд должен быть завернут в <div>. Количество столбцов внутри строки всегда должно составлять до 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Все столбцы внутри строки смещены влево и поэтому удалены из потока страницы, а другие элементы будут размещены так, как будто столбцы не существуют. Чтобы предотвратить это, добавим стиль, который очищает поток:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Также можно добавить несколько стилей и цветов, чтобы они выглядели лучше:

Пример

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}
Попробуйте сами »

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