как использовать 16-колоночную адаптивную сетку с 20px желобом

0

Я пробовал много сеток от скелета до золотого и бутстрапа, но я не смог найти лучшего решения. Тот, который подошел близко, был сеткой. но я не хочу никакого поля столбца. Вы можете сообщить мне, что это лучший способ сделать это. Напр. Я хочу использовать 10 col с 6col плавающим div... с 12 col я попробовал 8col с 4col и 7col с 5col..but я не получаю точную ширину psd.

Вы можете видеть, что я добавил скриншот psd. Изображение 174551

благодаря

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

  • 1
    Ширина столбцов в PSD может быть не рассчитана должным образом. Вы не должны придерживаться идеала пикселя. И дизайнер не должен на это рассчитывать. Дизайнер может отстать, думая об этой проблеме. Читать это: webdesign.about.com/od/webdesignbasics/a/aa061807.htm
  • 0
    @HerrSerker: я знаю, но я просто хочу быть рядом с этим. Вы можете увидеть скриншот PSD прилагается. Я просто хотел знать, если 16 col - 10 пока 6, как мне использовать 12 col .. 5x7 или 8x4..im застрял на этом
Показать ещё 8 комментариев
Теги:
grid
responsive-design

1 ответ

1
Лучший ответ

Сетки просты.

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

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

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

Разделить 960 пикселей на 10 = 96 пикселей на столбец

В CSS создайте класс для каждого размера сетки, используя формулу 96 * 1, 96 * 2, вплоть до 10

grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}

затем примените классы к элементам в вашем HTML, чтобы

<div class="logo grid_3"></div>
<div class="nav grid_7"></div>

Большинство систем сетки также используют "префикс" и "суффикс" с применяемым маркером, который толкает или тянет элементы влево или вправо, когда вам не нужен контейнер, который должен быть grid_3, но вам нужно сделать grid_7 из-за расстояние.

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

жидкостные решетки немного отличаются, и я сначала обернул бы голову вокруг фиксированной.

[edit] вы должны использовать то, что находится в дизайне. (суффикс и префикс), как я объяснил, чтобы нажимать и тянуть элементы на странице, поэтому используйте (suffix_1) как способ нажатия на элемент правой стороны, создавая разрыв столбца в дизайне, то же самое касается preffix_1

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню