Блок пользователя
Регистрация на нашем сайте позволит вам общаться на форумах и получить доступ к другому полезному функционалу
Вы вошли как Гость

Автор Сообщение
Kabak
Аватар

Участник
Сообщения: 37

Как происходит вёрстка по сетке?
  • #1
  • 28.10.2023 11:53

Собственно, каким образом верстают по некой сетке ?   ( интерисует сам процесс верстания и при этом соблюдение сетки )  Что такое сетка и её базовые принципы понятны. 

Не понятно как её придерживаются люди при вёрстке ? ( если кроме отсылки к bootstrap или аналогам нечего добавить, то прошу не отвечать )

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Как происходит вёрстка по сетке?

Сетка – это не изобретение разработчиков #Bootstrap. Просто в этом фреймворке используется ее оптимальный, классический вариант.

Определений сетки, наверно, можно нагуглить много. Для меня сетка – это система деления полезной ширины сайта на воображаемые доли, реализуемая через набор классов. Классика – это 12 “колонок”, поскольку их спокойно можно поделить на 2, 3, 4, 6 и 12 равных частей. Ну а неравных может быть еще больше. Хотя [в нелюбимом тобой CSS-фреймворке] делить можно так хочешь. Например, на 5 равных частей по 2/10:

<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>

А можно еще заковыристее. Первая колонка 5/12, остальные по 7/36:

<div class="col-5">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>

Кроме колонок в сетке “участвуют” межколоночные и боковые отступы.

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

Колонки связаны с порогами адаптивности, определяемыми с помощью медиа-запросов (Media Queries): 12-колоночная сетка в процентах будет одинаково применяться как для фиксированных ширин, так и для “резины”. На каждом "пороге" будут действовать соответствующие ему классы колонок (см. пример ниже).

Используется сетка просто. Например, тебе необходимо сверстать 3 блока, которые на мобильном устройстве будут иметь 100% ширину, а на десктопе занимать равные доли по ширине:

<div class="col-12 col-xl-4">
	...
</div>
<div class="col-12 col-xl-4">
	...
</div>
<div class="col-12 col-xl-4">
	...
</div>

Здесь на ширинах экрана “от нуля” каждая из трех колонок будет занимать всю ширину, а от 1200px они “схлопнутся” и выстроятся в ряд с одинаковой шириной 4/12.

Пример сетки далеко не современный, но с указанием ее основных элементов:


Отредактировано: admin (28.10.2023 19:57, 7 месяцев назад)
Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Как происходит вёрстка по сетке?
  • #3
  • 28.10.2023 21:56

1) class="col"  просто присваевается значения width в процентах ?   

2) А height ?

3) а как соблюдаются отступы между блоками ?   

- так 

<div class="col-5">
    ...
</div>

просто вносится блок который имеет ширину, но не заполнени ничем ?

 

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Как происходит вёрстка по сетке?

Все это я приводил на примере Бутстрапа, так что названия классов можешь считать условными)

  1. Да, всегда в процентах. И для классов .col и для классов, начинающихся с .col-
  2. Высота это высота. Она к сетке никак не относится
  3. Отступы между блоками формируются через свойство padding для того, чтобы не влиять на итоговую ширину. Отступы до и после блока в Бутстрапе реализуются классами .offset
<div class="col-xl-8">
...
</div>
<div class="col-xl-3 offset-xl-1">
...
</div>

Пустые колонки это несемантично))

Есть еще, например, адаптивные классы .order для порядка вывода колонок.

Поблагодарили