Сетка css – Как может использоваться CSS сетка на уровне компонентов: создание адаптивного дизайна

Модульная CSS сетка. Теория

Введение

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

Статья будет разбита на две части: в первой будут рассмотрены технологии, применяемые в нашей сетке, а во второй части мы, наконец-то, её построим.

Итак, поехали!

Словарь

Для начала необходимо будет усвоить несколько простых, но очень важных возможностей CSS, а дальше уже мы построим простейшую сетку, которую можно будет использовать прямо сейчас.

Box-sizing

Теория

Box-sizing — это свойство, позволяющее изменять алгоритм расчёта ширины и высоты элемента.

Это свойство, помимо наследования значения родителя, может принимать ещё три значения:

• content-box (по умолчанию) — Значение свойств width и height задают размеры контента, при этом не включают в себя отступы, поля и границы.
• border-box — Значение свойств width и height задают размеры всего блока, при этом включают в себя поля и границы, но не отступы.
• padding-box — Значение свойств width и height задают размеры всего блока, при этом включает в себя поля, но не отступы и границы.

Практика

Использовать это свойство очень просто — для начала добавьте код, приведённый ниже, после normalize.css (разумеется, если используете его) до начала блока ваших стилей. Да и всё на этом — готово!

*,
*:before,
*:after {
  box-sizing: border-box;
}

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

Кстати, этот способ получил наибольшее распространение благодаря фреймворку Bootstrap. Сейчас же, использование этого свойства — хороший тон вёрстки.

К счастью, вы можете использовать box-sizing без префиксов, конечно, если вы не поддерживаете тот самый браузер. Об этом нам напоминает Can I use.

Но зачем всё это для нашей сетки?

Отличный вопрос!

Как вы могли уже догадаться, использование box-sizing: border-box, даёт нам независимость от полей и границ блока. Именно это нам и понадобится при построении нашей сетки.

Media queries

Теория

Media queries (Медиа-запросы) — часть спецификации CSS3, которая позволяет нам задавать некую область действия селектора.

Медиа-запросы очень мощная штука, поддерживающая различные технические параметры устройств, отображающих контент. Прочитать обо всех поддерживаемых параметрах можно на htmlbook, при этом не предавая мысли о том, что поддержка IE ниже 9-ой версии — зло.

Практика

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

Нам понадобится только лишь параметр ширины окна браузера:

@media (min-width: значение) { ... }
@media (max-width: значение) { ... }
@media (min-width: значение) and (max-width: значение) { ... }

На месте значений вписывается, как бы это банально не звучало, значение (px, em, rem). Например:

@media (min-width: 768px) { background-color: #000 }

Важно учесть, что при использовании свойства min-width имеет место наследование свойств родителя. Это очень важное замечание, так как не стоит заново указывать все свойства — достаточно лишь указать те, что следует изменить.

Графически можно изобразить это так:

И всё же, давайте рассмотрим пример.

На холсте у нас всего лишь один

div:

<div>Demo Text</div>

Зато присутствует простыня стилей:

/* Basic styles */
.demo-block {
    background-color: #ccc;
    color: #fff;
    padding: 25px;
}

/* Screen > 768px */
@media (min-width: 768px) {
    .demo-block {
        text-align: center;
    }
}

/* Screen > 992px */
@media (min-width: 992px) {
    .demo-block {
        text-align: right;
    }
}

/* Screen > 1200px */
@media (min-width: 1200px) {
    .demo-block {
        background-color: #fff;
        color: #000;
        text-align: left;
    }
}

Если не терпится посмотреть результат, то перейдите по ссылке и изменяйте ширину блока с помощью мыши.

Итак, у нас есть базовый стиль поля, цвет текста и фон. При изменении размеров окна браузера, внешний вид блока не будет меняться до тех пор, пока ширина окна меньше 768px. Как только значение перевалит через эту отметку, наш блок получит новое свойство (вернее сказать, получит переопределение стандартного свойства) — выравнивание текста по центру. Мы изменяем ширину окна ещё больше. Достигаем значения

992px и наш текст выравнивается по правому краю. Меняем размер снова. На этот ширина будет больше 1200px. получается, что отрабатывает новый блок, в котором меняется фон, цвет текста и его выравнивание.

Просто же, неправда ли?

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

К сожалению, не всегда можно ограничиться таким подходом и приходится использовать какие-то конечные промежутки. Иначе говоря, использовать сразу два переломных значения.

@media (min-width: значение) and (max-width: значение) { ... }

Допустим, так:

.class {
    background-color: #000;
    color: #fff;
}

@media (min-width: 540px) and (max-width: 767px) {
	.class {
		background-color: #fff;
		color: #000;
	}
}

@media (min-width: 768px) {
	.class {
		color: red;
	}
}
 

Изначально имеется чёрный фон и белый цвет текста до тех пор, пока ширина окна браузера не преодолеет отметку в 540px . Если это произойдёт, то фон станет белым, а цвет текста чёрным. Но, так как у нас задан чёткий отрезок, то при достижении отметки в 768px фон изменится снова на изначальный (белый), а цвет текста станет красным.

Но зачем всё это для нашей сетки?

И снова в точку!

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

Плавающие элементы

Теория

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

Давайте рассмотрим такую проблему и её решение.

У нас есть следующая разметка:

<div>
    <div>Col #1</div>
    <div>Col #2</div>
</div>

И вот такие вот стили:

.row {
    background-color: #cfcfcf;
    padding: 25px;
}

.col-one,
.col-two {
    float: left;
    width: 50%;
    background-color: #fff;
}
 

В результате имеет вот такое вот поведение:

Но постойте-ка! Почему родительский элемент имеет разный размер поля вокруг дочерних? А ответ прост — особенность float: left и его родительского класса.

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

Посчитаем:

• Высота — 0px
• Поле сверху — 25px
• Поле снизу — 25px

Итого: 50px.

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

Типичный clearfix для современных браузеров выглядит следующим образом:

.clearfix:before,
.clearfix:after {
	content: " ";
    display: table;
}

.clearfix:after {
	clear: both;
}

Вот теперь другое дело!

Псевдоэлементы :before и :after создают пустую ячейку таблицы и предотвращают вертикальное схлопывание отступов. В то же время, псевдоэлемент :after дополняется объявлением свойства clear: both, которое прерывает обтекание с обеих сторон.

Как-то запутанно? Так и есть, но я уверен, что большинство использует clearfix и даже не знает как он работает. Теперь же, вы не все 🙂

Внимание!

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

Заключение

В первой части статьи мы разобрались со всем тем, что нам предстоит использовать при построении сетки. Наконец-то узнали, зачем необходимо свойство box-sizing, разобрались с базовой возможностью медиа-запросов @media и в довесок теперь понимаем что такое clearfix.

Продолжение статьи будет находиться тут.

принцип создания, особенности — учебник CSS

Главная составляющая адаптивного дизайна — это гибкая сетка, в основе которой лежит разметка с относительной, не фиксированной шириной, что позволяет элементам веб-страницы менять свои размеры, помещаясь в экран любой ширины.

Как правило, при создании такой сетки используются свойства width и max-width. Последнее свойство позволяет задать ограничение (максимальную ширину), чтобы на очень больших дисплеях веб-страница не становилась слишком широкой.

Допустим, вам нужна страница с двумя колонками, одна из которых должна занимать ⅔ ширины окна браузера, а вторая — оставшееся пространство, то есть ⅓ ширины окна. При этом максимально допустимая ширина контейнера, в котором содержатся колонки, — 1180 пикселей. Каким должен быть код HTML и CSS для реализации этой задачи? Приведем пример:

<div>
	<div>
	</div>
	<div>
	</div>
</div>

 

/* Стили для контейнера */
.container {
	width: 100%;
	max-width: 1180px;
}

/* Хак Micro Clearfix */
.container:after {
	content: " ";
	display: table;
	clear: both;
}

/* Стили для колонки шириной ⅔ */
.column-2-3 {
	width: 67%;
	float: left;
}

/* Стили для колонки шириной ⅓ */
.column-1-3 {
	width: 33%;
	float: left;
}

Элемент .container имеет ширину 100%, но с ограничением максимум в 1180 пикселей. Хак для контейнера помогает восстановить потерянную высоту родителя float-элементов. Колонка .column-2-3 имеет ширину, равную ⅔ ширины контейнера. Колонке .column-1-3, соответственно, задана ширина, равная ⅓ ширины контейнера. Обе колонки «плавающие», сумма их ширин не превышает 100%, и потому они располагаются в одном ряду.

Многоколоночный дизайн и порядок HTML

Когда многоколоночный макет для десктопной версии адаптируется под мобильные устройства средствами CSS, чаще всего все колонки складываются в одну. Если сетка создана на основе свойства

float, это означает, что в определенной контрольной точке колонкам нужно задать правило float: none, которое отменяет обтекание. Тогда все колонки разместятся одна под другой.

И здесь может возникнуть проблема с порядком расположения HTML-элементов. Представим, что макет имеет три колонки: левая содержит длинный список рекламы, средняя — основной контент, а правая — ссылки на похожие записи. Когда вы отмените обтекание, левая колонка будет отображаться в самом верху, под ней будет находиться средняя колонка, а в самом низу — правая.

Именно так и выглядит порядок вывода HTML-элементов по умолчанию. Но для пользователя смартфона это будет означать, что при попадании на веб-страницу он будет вынужден сначала долго скроллить блок с рекламой, после чего он доберется до того контента, за которым пришел.

Безусловно, посетителю сайта будет намного удобнее видеть основное содержимое страницы в ее начале. Эта проблема может быть решена путем добавления вспомогательного блока-контейнера (мы показывали такой пример в одном из прошлых уроков).

Если вся эта информация вас запутала, просто запомните, что при создании HTML-документа необходимо соблюдать желаемый порядок следования элементов, рассматривая макет как одноколоночный. Откройте готовый HTML-документ без CSS-стилей в браузере — и вы получите представление о том, в каком порядке будет показан контент пользователю смартфона. Разместите основной контент первым, а уже под ним добавьте блоки со второстепенным содержимым. Не волнуйтесь, для многоколоночной версии макета вы можете поменять колонки местами с помощью CSS.

Настройка box-sizing для всей сетки

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

padding либо рамку border по бокам колонок, когда они сами по себе занимают абсолютно всю ширину контейнера, то возникнет нехватка места и одна из колонок «вылетит» из своего ряда вниз.

Но с помощью CSS-свойства box-sizing можно управлять алгоритмом расчета размеров элемента: если задать ему значение border-box, то браузер будет включать отступы и границы в общую ширину. Примените данное свойство к элементам сетки либо вообще ко всем элементам (используя селектор *), и тогда вы сможете смело добавлять любые отступы и рамки без страха, что верстка «развалится». Не забудьте продублировать правило с префиксами -moz- и -webkit- — некоторые браузеры требуют их.

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

От фиксированных значений к относительным

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

Допустим, имеется двухколоночный макет. Ширина основного контейнера составляет 960 пикселей. Ширина одной колонки — 600 пикселей, второй — 360 пикселей:

.container {
	width: 960px;
}
.main {
	width: 600px;
}
.sidebar {
	width: 360px;
}

Как правильно перевести эти значения из пикселей в проценты? Для начала займемся основным контейнером и перепишем для него стили таким образом:

.container {
	width: 100%;
	max-width: 960px;
}

Далее, для перевода значений ширины колонок из пикселей в проценты необходимо разделить это значение на значение ширины контейнера (в пикселях), а затем полученное дробное число перевести в проценты, умножив его на 100. В случае с нашим примером мы разделим число 600 на 960, получим 0,625. Умножим результат на 100 и получим 62,5. Это и есть процентное значение, которое мы поставим вместо пиксельного:

.main {
	width: 62.5%;
}

Те же самые расчеты проведем для второй колонки: 360 / 960 = 0,375 * 100 = 37,5.

.sidebar {
	width: 37.5%;
}

Обратите внимание, что полученные числа округлять не нужно. В противном случае вы рискуете получить сумму либо более 100 (что приведет к выпадению колонки из ряда), либо менее 100 (что отобразится на внешнем виде макета: он уже не будет идеально соответствовать старому виду, который определялся пиксельными значениями).

Браузер нормально воспринимает дробные значения, несмотря на то, что пиксель не делится, поэтому смело используйте их. В том же Bootstrap можно встретить значения ширины колонок наподобие 33.33333333% и 66.66666667%. Самое главное, помните, что общая ширина всех колонок в одном ряду не должна превышать 100% ни на йоту.

---

Далее в учебнике: адаптивные изображения и видео.

концепция явных и неявных элементов, использование свойств и ключевых слов

От автора: В этой статье объясняется разница между явными и неявными сетками в CSS Grid.

CSS grid layout использует концепцию явной и неявной сетки. Построение сеток CSS без нее не обходится. Это ключевая концепция, которую вы должны знать, иначе вы можете получить кучу строк или столбцов, которых не ожидали!

Явные и неявные сетки

Явная сетка является сеткой, которую вы определяете с помощью свойств grid-template-rows, grid-template-columns и grid-template-areas.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Тем не менее, у вас все равно могут быть элементы, которые не вписываются в явно заданную сетку. Например, допустим, вы определили сетку, которая может вместить только 6 элементов сетки, но контейнер сетки фактически содержит 9 элементов. Только 6 элементов поместятся в явную сетку, а 3 останутся. Здесь в игру вступает неявная сетка.

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

<!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 60px 60px; grid-template-columns: 1fr 1fr; grid-gap: 10px; } #grid > div { padding: .5em; background: gold; text-align: center; } </style> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!doctype html> <title>Example</title> <style> #grid {   display: grid;   grid-template-rows: 60px 60px;   grid-template-columns: 1fr 1fr;   grid-gap: 10px;   } #grid > div {   padding: .5em;   background: gold;   text-align: center; } </style> <div>   <div>1</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div>   <div>6</div> </div>

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

Установка размера трека в неявных сетках

Вы можете заметить, что дополнительный ряд не такой высокий, как предыдущие два. Это потому, что мы устанавливаем высоту ряда, используя свойство grid-template-rows, но это относится только к рядам в явной сетке. Высота ряда в неявной сетке должна быть установлена с помощью свойства grid-auto-rows. Но поскольку мы этого не делали, неявный ряд использует размер трека auto (который основан на контенте).

Вот как определяются свойства размера трека:

Свойства определения размера трека явной сетки по сравнению со свойствами определения размера трека неявной сетки

Явная сетка использует grid-template-rows и grid-template-columns.

Неявная сетка использует grid-auto-rows и grid-auto-columns.

В следующем примере мы делаем все явные и неявные строки одинаковой высоты (60px). Для этого мы добавляем свойство grid-auto-rows, чтобы установить высоту неявно сгенерированной строки:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 60px 60px; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-rows: 60px; } #grid > div { padding: .5em; background: gold; text-align: center; } </style> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!doctype html> <title>Example</title> <style> #grid {   display: grid;   grid-template-rows: 60px 60px;   grid-template-columns: 1fr 1fr;   grid-gap: 10px;   grid-auto-rows: 60px;   } #grid > div {   padding: .5em;   background: gold;   text-align: center; } </style> <div>   <div>1</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div>   <div>6</div> </div>

auto-flow для рядов и колонок

До сих пор мы создавали дополнительные ряды для размещения дополнительных элементов сетки. Но что, если вместо этого нам нужны дополнительные колонки? Это можно сделать с помощью свойства grid-auto-flow.

Это свойство позволяет указать, использовать ли ряды или колонки для автоматически размещаемых элементов. Другими словами, вы можете указать, будет ли неявная сетка увеличивать ряды или колонки. Начальное значение свойства — row, так что это объясняет, почему в приведенном выше примере добавлены дополнительные ряды вместо колонок. Если вы предпочитаете использовать столбцы, вы можете сделать это:

Это обеспечит размещение дополнительных элементов в неявных колонках, а не в рядах. Вот что происходит, когда мы применим это к первому примеру:

<!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 80px 80px; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-flow: column; } #grid > div { padding: .5em; background: gold; text-align: center; } </style> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!doctype html> <title>Example</title> <style> #grid {   display: grid;   grid-template-rows: 80px 80px;   grid-template-columns: 1fr 1fr;   grid-gap: 10px;   grid-auto-flow: column;   } #grid > div {   padding: .5em;   background: gold;   text-align: center; } </style> <div>   <div>1</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div>   <div>6</div> </div>

Конечно, вы можете пойти дальше и использовать свойство grid-auto-columns, чтобы изменить ширину автоматически сгенерированной колонки. Поэтому, если вы хотите, чтобы все вышеперечисленные колонки были одинаковой ширины, вам нужно использовать grid-auto-columns: 1fr.

Обратите внимание, что, устанавливая для grid-auto-flow — column, вы изменяете фактический поток элементов сетки. Вы можете заметить, что элементы сетки в приведенном выше примере теперь размещаются вдоль колонок, а не рядов.

Ключевое слово dense

Свойство grid-auto-flow также имеет дополнительное ключевое слово dense, которое может помочь сохранить вашу сетку компактной и предотвратить возникновение множества пробелов из — за несоответствия размером элементов сетки. Например, вы можете превратить эту сетку:

Пример сетки без ключевого слова dense

В следующее:

Пример сетки с ключевым словом dense

Использование этого ключевого слова может привести к тому, что элементы будут отображаться не по порядку (поскольку более поздние элементы могут быть возвращены назад и заполнить пробелы, появившиеся ранее), поэтому это не подходит для любой ситуации. Ознакомьтесь с разделом по grid-auto-flow для получения дополнительной информации.

Источник: https://www.quackit.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Модульная сетка | htmlbook.ru

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

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д. Для примера рассмотрим главную страницу сайта deviantart.com (рис. 1).

Рис. 1. Главная страница deviantart.com

Каждый блок этой страницы четко отделен от других с помощью пустого пространства, рамки или разделителя, в качестве которого выступает цветной прямоугольник с текстом заголовка. Напрашивается только вопрос, действительно ли мы имеем дело с тремя колонками? В некоторых случаях сразу определить, сколько колонок содержит макет и впрямь затруднительно. В таком случае следует понимать, что колонки могут объединяться, а также содержать не только сплошной текст, но и графические вставки. Если представить основные блоки страницы в виде однотонных прямоугольников, то получим наглядную модульную сетку, по которой сразу становится понятно, как сверстан документ (рис. 2).

Рис. 2. Модульная сетка для главной страницы deviantart.com

По данному рисунку видно, что верхний блок с названием сайта, формой поиска и кнопками навигации занимает всю ширину страницы. Далее идут три колонки, причем первые две колонки предварительно объединены в одну для удобного представления необходимой информации. Завершает макет блок с контактной и правовой информацией.

Перейдем к принципам построения модульной сетки. Вначале макет веб-страницы разрабатывают на листе бумаги. Это позволяет, не тратя зря времени, быстро сделать серию набросков и уже из них выбрать подходящий эскиз. Сами посудите, сколько вариантов можно создать за десять минут в графическом редакторе и сколько за это же время с помощью карандаша и бумаги? При этом не имеет значения степень владения программой, все равно на бумаге выйдет быстрее. Тем более что набросок может быть и корявым, главное чтобы автор сам понял, что он нарисовал. Обычно вместо текста и рисунков применяют схематические значки. Например, текст обозначается несколькими горизонтальными линиями (рис. 3), а рисунки изображаются затемненными блоками или перечеркнутыми прямоугольниками (рис. 4).

Рис. 3. Обозначение текста в макетах

Рис. 4. Обозначение изображений в макетах

Далее эти обозначения будем применять при рассмотрении наиболее распространенных модульных сеток.

Одноколонная сетка

Текст в одну колонку чаще всего встречается в академическом дизайне, при фиксированном макете и публикации большого текста.

Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде.

На рис. 5 показана типичная схема одноколонной модульной сетки. Как правило, наблюдается четыре основных блока — заголовок страницы, набор ссылок на другие страницы сайта (навигация), собственно сам текст и в самом низу контактная информация. Если высота страницы достаточно велика, то блок навигации дублируют внизу или делают ссылку «Наверх», которая перемещает к началу документа.

Рис. 5. Одноколонная модульная сетка

Иллюстрации в тексте встречаются по ходу, при этом текст их обычно обтекает по контуру. При активном применении изображений на сайте удобнее воспользоваться фиксированным макетом, ширина которого точно известна. Тогда рисунки можно готовить заданного размера, которые точно впишутся в макет страницы. Например, главная страница сайта victoriassecret.com (рис. 6) основана на макете фиксированной ширины и практически полностью состоит из набора рисунков.

Рис. 6. Главная страница сайта victoriassecret.com

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

Рис. 7. Модульная сетка для главной страницы сайта victoriassecret.com

Двухколонная сетка

Это один из самых распространенных вариантов при использовании на сайтах. При такой модульной сетке используется две колонки — одна отводится под основной текст, а вторая используется для навигации и другой полезной информации (рис. 8).

Рис. 8. Двухколонная модульная сетка

Принципиального значения не имеет, слева или справа располагается колонка с навигацией, встречается и тот и другой вариант.

В каком-то смысле двухколонная сетка стала стандартом де-факто для информационных сайтов из-за своего удобства. Действительно, все «под рукой» — и текст и ссылки, к тому же данная сетка не исключает подключения горизонтальной навигации, как это принято в одноколонной сетке.

Двухколонные сетки удобны при создании самых разнообразных сайтов и не требуют особых знаний по верстке веб-страниц. Единственный недостаток, который им вменяют, что подобные сайты выглядят достаточно однообразно. Но с другой стороны пользователям удобнее работать с сайтом привычного вида, без лишних «наворотов».

Трехколонная сетка

Такие сетки часто применяются на главных страницах сайтов, где одновременно требуется показать пользователю множество возможностей, которые он обнаружит на данном сайте. Также трехколонная сетка используется и на внутренних страницах, если для размещения различной информации двух колонок уже не хватает (рис. 9).

Рис. 9. Трехколонная модульная сетка

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

Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. Возвращаясь к главной странице сайта deviantart.com, приведем более детальную модульную сетку (рис. 10). Отдельные блоки выделены разным цветом.

Рис. 10. Модульная сетка для главной страницы deviantart.com

На сайте deviantart.com применяется три колонки, две из них часто объединяются для получения более широкой области. Это оправданно, поскольку требуется разместить 5 фотографий или три колонки с текстом.

К недостаткам трехколонной сетки относится достаточная сложность верстки макета. Чтобы получить нужный результат приходится иной раз затратить много времени на создание стилевого файла и отладку документа в разных браузерах.

 

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

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

Резюме

Модульные сетки позволяют упростить верстку сайта, поскольку все материалы разбиваются на отдельные блоки, которые выравниваются по невидимым направляющим линиям. Такие блоки хотя и взаимосвязаны друг с другом, но обычно дозволяют независимое редактирование данных, что упрощает оформление элементов.

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

СSS Сетка — Введение

---

---

Заголовок

Меню

Главная

Справа

Подвал

Редактор кода »

---

Сетка макета

Модуль CSS — Сетка макета предлагает систему компоновки на основе сетки, со строками и колонками, что упрощает проектирование веб-страниц без использования поплавков и позиционирования.

---

Поддержка браузеров

Свойства сетки поддерживаются во всех современных браузерах.

---

Элементы сетки

Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.

Пример

<div class=»grid-container»>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Редактор кода »

---

Свойство display

HTML элемент становится контейнером сетки, устанавливая свойство display для значений grid или inline-grid.

Все прямые потомки контейнера сетки автоматически становятся пунктом сетки.

---

Столбцы сетки

Вертикальная линия элементов сетки называется столбцы.

---

Строки сетки

Горизонтальная линия элементов сетки называется строки.

---

Разрывы сетки

Пространство между каждым столбцом/строкой называется разрыв.

Размер зазора можно настроить с помощью одного из следующих свойств:

grid-column-gap
grid-row-gap
grid-gap

Пример

Свойство grid-column-gap задает зазор между столбцами:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Редактор кода »

Пример

Свойство grid-row-gap задает промежуток между строками:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Редактор кода »

Пример

Свойство grid-gap является сокращенным для свойств grid-column-gap и grid-row-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Редактор кода »

Пример

Свойство grid-gap также может использоваться для установки как разрыва строки, так и разрыва столбца в одном значении:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Редактор кода »

---

Линия сетки

Линии между столбцами называются линия сетки.

Линии между строками называются линия строки.

См. номера строк при размещении элемента сетки в контейнере сетки:

Пример

Поместите элемент сетки в строку столбца 1, и пусть он заканчивается на строке столбца 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Редактор кода »

Пример

Поместите элемент сетки в строку 1, и пусть он заканчивается на строке 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Редактор кода »

Grid Design или вёрстка с Сеткой. / Habr

На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков — «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»

Что такое сетка знает каждый кто когда либо работал с графическими редакторами (Photoshop, Fireworks, Gimp и т.п.) и конечно же оценил её необходимость при создание любого дизайна. Но как реализовать Сетку в вебе? По сути Табличная вёрстка была самым настоящим дизайном веб-страниц с Сеткой, несомненно очень удобным. Но не целевое использование элементов table приводило в ужас.
К счастью огромная популярность веб стандартов, выросшая и продолжающая расти за последние годы, а так же их поддержка современными броузерами, дали нам возможность создавать много-функциональные страницы с очень небольшой, логичной разметкой. Такая вёрстка получила название Блочная. Но и у Блочной вёрстки оказалась слабая сторона. При создание страниц с огромным набором элементов различных по размерам и по смыслу, разметка таких страниц стала очень тяжёлым занятием, а если над разметкой работает более чем один человек такая работа может стать кошмаром.
И вот на выручку пришла техника с использованием Сетки. Эта техника является гибридом между Блочной и Табличной вёрсткой. Её использование даёт нам:

• скорость и лёгкость разработки
• свободу позиционирования
• пропорциональность элементов страницы и их размещения

Плата за всё это всего лишь чуть-чуть лишней разметки. Я думаю в наши дни когда стоимость человека часов гораздо дороже железа и производительности, нетрудно догадаться в какую сторону склоняется чаша весов.

Что такое вёрстка с Сеткой? Прежде всего это концепция. Концепция которая включает в себя очень много аспектов дизайна и очень мало правил для её реализаций. Это даёт полную свободу и никакой стандартизаций в её исполнении. Я скажу даже больше — одну и ту же Сетку можно реализовать самыми разными способами. Если вы уже читали про Сетку то могли заметить что каждый автор начинает с новой стороны углубляясь далеко в детали, это мягко говоря вводит в замешательство. К счастью начали появляться Grid Systems — CSS библиотеки для работы с Сеткой. И на их примере можно очень быстро освоить базовые принципы этой техники.

Я думаю не имеет смысла писать о всех аспектах Сетки, информацию о ней вы можете спокойно найти в Интернете. Я предлагаю создать свою простенькую Grid System.

Для начала надо усвоить что сетка состоит из колонок и промежутков между ними. Основных величины три — это ширина сетки, ширина колонки, и ширина промежутка между колонками. Ширина колонок зависит от их количества.

Давайте попробуем сделать сетку шириной 950 пикселей в 16 колонок с промежутками в 10 пикселей, выходит что одна колонка должна быть шириной 50 пикселей. Уяснив все величины мы открываем любой известный нам графически редактор и создаём макет. К Сетке так же можно добавить отступы с лева и с права, допустим по 20 пикселей и того получается макет шириной 990 пикселей. Мой пример посмотреть можно здесь.

Теперь можно начать создавать нашу библиотеку. Как и большинство CSS библиотек наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера, сохранив reset.css создадим grid.css в который сразу же можем добавить метод для чистки контейнеров содержащих плавающие блоки — Clear Fix. Первое что нам нужно это правило для контейнера который будет содержать все наши колонки. Ширина каждого контейнера ровна ширине нашей сетки.

.container {
margin: 0 auto;
width: 950px;
}

Теперь можно добавить правило для наших колонок, оно содержит ширину и отступ. Отступ выполняет роль промежутка(gutter) между колонками.

.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}

Для последней колонки отступ не нужен, для этого добавим правило и для неё:

.last { margin-right: 0; }

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

.clearfix:after, .container:after{
content: «.»;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix, .container { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix, * html .container {height: 1%;}
.clearfix, .container {display: block;}
/* End hide from IE-mac */

Теперь можно приступить к нашим колонкам. Колонки могут быть шириной в две три и так далее. Для этого мы можем применить к ним следующие правила:

.span-1 { width: 50px; }
.span-2 { width: 110px; }
.span-3 { width: 170px; }
.span-4 { width: 230px; }
.span-5 { width: 290px; }
.span-6 { width: 350px; }
.span-7 { width: 410px; }
.span-8 { width: 470px; }
.span-9 { width: 530px; }
.span-10 { width: 590px; }
.span-11 { width: 650px; }
.span-12 { width: 710px; }
.span-13 { width: 770px; }
.span-14 { width: 830px; }
.span-15 { width: 890px; }
.span-16 { width: 950px; margin-right: 0; }

В принципе это всё что нужно для реализаций Сетки, можно ещё добавить обёртку и класс для просмотра Сетки с макетом. Создадим main.css и добавим в него:

.wrapper {
margin: 0 auto;
width: 990px;
}
.overlay {
background: transparent url(overlay.png) repeat-y scroll top left;
}

Вот как может выглядеть вёрстка:

<div>
	<div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Я думаю для начала этого достаточно.
Мой пример можно посмотреть здесь или скачать здесь.

Вот парочка замечательных ресурсов о Сетке:
Страничка Марка Балтона и его Five Simple Steps to designing grid systems.
Страничка Коя Вина и его Grid Computing… and Design, а так же Grids Are Good.
Сайт посвящённый вёрстке с Сеткой Design By Grid.

CSS сетка | Введение в CSS

CSS сетка.

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

Для того что бы подключить каскадную таблицу стилей к нашему html коду нам нужно:

1) Создать новую папку в нашем Первом проекте, назвать ее css

2) Создаем новый файл в программе Brackets, именуем его как styles.css и сохраняем в папку css.

3) Затем в текстовом редакторе вам нужно найти значок рядом с шестеренкой, и изменить его значение на Vertical Split. Это разделит наше рабочее пространство на 2 колонки. Так же вы заметите изменения в левом углу- колонки Left и Right, которые как не трудно догадаться, будут показывать те файлы, которые будут отображаться в Левой и Правой части приложения соответственно.

4) Переносим наш файл styles.css под колонку Right и мы можем увидеть наш, пока еще пустой файл css в правой части программы.

5) Далее что нам нужно сделать, это сформировать сетку стилей, то есть применим такие стили как : ширина, обтекание и высота для наших главных блоков Body, Wrapper, Header, nav, vine, footer и т.д. Работать мы будем конечно же в правой части экрана в styles.css

Для удобства рекомендуем вам разделять блоки комментариями. Пишутся они следующим образом: 

/*Текст*/

Работа с основными блоками сайта

Обертка (Wrapper)

Первый блок, над которым мы будем работать, будет блок Wrapper. Для того что бы создать селектор для этого блока, нам нужно написать 

#wrapper{ место для правил }

Первое правило будет width, оно отвечает за ширину нашего блока. Указывается она так width: 1100px;
Далее у нас идет тег height  – высота. Указываем значение auto, он означает, что какой высота будет дочерний контент в блоке, такой же высоты будет и блок wrapper. Его высота будет зависеть от высоты вложенных в него блоков.
 

Конечно же для работы css стилей нам нужно привязать наш файл css к файлу html. 

 

Для этого  в блоке head html файла указываем конструкцию link, атрибут  rel со значением stylesheet, и атрибут href со значением css/styles.css. Должно у нас получиться вот так :

<link rel=”stylesheet” href=”css/styles.css”/>

Так же, прописываем тоже самое в файле index.html, все так же в блоке head.

Сохраняем получившееся, проверяем в браузере. Если что-то не получилось, проверьте с самого начала, возможно, где-то произошла опечатка.

Шапка сайта (Header)

Следующий блок, над которым мы будет работать, это блок header.  Точно так же прописываем width и height. Первый у нас будет со значением в 100%, второй так же ставим значение auto. Должно получиться следующее:

#header{
width: 100%;
height: auto;
}

Если мы хотим обратиться к определенному фрагменту, кажем к изображению, мы пишем так  #header(то есть мы работаем все его в этом блоке), и второй селектор который мы используем будет img. И выходит у нас так:
 

#header img{
Width:100%;
}

В ширину у нас изображение должно занимать 100% пространства. Сохраняем, проверяем в браузере. Если все верно переходим к следующему блоку. Все последующим блокам мы будем давать так же значения width и height, так что не забывайте их указывать в каждом блоке.

Пространство с динамическим контентом страницы (Content)

Блок content. Выставляем значения ширины на 100%, а высоты auto

Основная навигация сайта (Nav)

Так же поработаем над блоком навигации — nav. Высота 200px ширина 670px

Так же нам потребуется обратиться к  нашему тегу <ul>, вложенному в теге nav.

#ul nav{
height:500px
}

Пространство для карты (Map)

Далее у нас идет тег map. Ширину мы ставим такую же, как у его родительского документа, то есть 200px. А высоте даем значение в 225px.

 

И для того, что бы изображение не выходило за рамки родительского блока, необходимо написать правило, что ширина и высота изображения равны 100%. То есть во всю ширину и высоту родительского блока.

Основное рабочее пространство страницы

Следующим на очереди у нас тег main. Его ширина будет вычисляться при помощи значения calc.

Получиться должно так: width: calc(100% — 200px).

Таким образом, мы создали 2 блока, у которых общая ширина составляет 100% родительского блока. Далее мы должны дополнить наши блоки nav и main значением float(обтекание). Для первого пишем значение float: left;, для второго float: right;

 

Подвал сайта (Footer)

Так же не забудем про блок footer, даем ему правило clear: both; Это правило означает, что мы отключаем обтекание и слева и справа.

Подробнее мы будем говорить о других методах позиционирования в отдельном курсе.

На этом наш урок закончен, ждем вас на уроке по Отступам и фонам.