Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2017, 01:24
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Сетка для верстки
Основана на flexbox. Поддерживаются макеты с количеством колонок от 2 до 12. Если ширина области обзора меньше 769 пикселей (мобильные устройства), то блоки отображаются в одну колонку.

https://github.com/tz4678/ResponsiveGrid
Пример
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2017, 06:57
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,639

GayCoder, какие преимущества перед Simple Grid, там:

1. Есть описание использования
2. Размер кода в 2 раза меньше
3. Не используется flexbox
4. На мобильных блоки тоже можно колонить плюс скрывать.

Попробуй исправить пункты 1, 2, 4, тогда уже станет интересно...
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2017, 12:24
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

Интересно... А есть какая-то схожая сетка но с возможностью colspan и rowspan одновременно? Может есть описание алгоритма, как сделать такое без использования таблиц и display: table?

Последний раз редактировалось TestUser013, 02.02.2017 в 12:44.
Ответить с цитированием
  #4 (permalink)  
Старый 02.02.2017, 13:37
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Там display: table только для clearfix
Ответить с цитированием
  #5 (permalink)  
Старый 02.02.2017, 14:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 11,533

Сообщение от TestUser013
А есть какая-то схожая сетка но с возможностью colspan и rowspan одновременно? Может есть описание алгоритма, как сделать такое без использования таблиц и display: table?
Странное желание делать таблицы но без собственно таблиц...
Ответить с цитированием
  #6 (permalink)  
Старый 02.02.2017, 17:08
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Я выбросил все лишнее. <div class="col"></div> теперь занимает все свободное пространство (если несколько, то равные части), а span-1-2 и т.д. только часть
Ответить с цитированием
  #7 (permalink)  
Старый 02.02.2017, 19:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,639

GayCoder, есть некая логика, а не просто все возможные комбинации цифра-цифра от 1 до 12.

Content Columns: 1-1, 1-2, 1-3, 1-4, 1-5, 1-6, 1-7, 1-8, 1-9, 1-10, 1-11, 1-12

1-1 - всего одна колонка, 1-2 - одна из двух всего две, 1-3 - одна из трех всего три, и тд (колонки одинаковой ширины)

Layout Columns: 1-12, 2-12, 3-12, 4-12, 5-12, 6-12, 7-12, 8-12, 9-12, 10-12, 11-12

1-12 - 1/12 родителя, 2-12 - 2/12 родителя, 3-12 - 3/12 родителя, и тд (колонки относительной ширины)

PS: получаем пятое преимущество - там реализованы два типа сетки)

Последний раз редактировалось Rise, 02.02.2017 в 19:50.
Ответить с цитированием
  #8 (permalink)  
Старый 03.02.2017, 00:44
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Замечание не в тему. Все переделал снова.

Ответить с цитированием
  #9 (permalink)  
Старый 03.02.2017, 00:49
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Мне кажется все эти паддинги нужно убрать.
Ответить с цитированием
  #10 (permalink)  
Старый 03.02.2017, 18:01
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 75

Опытным путем пришел к такому простому стилю:

.row {
  display: flex;
  margin: 0 -15px; 
}

[class*="col-"] {
  padding: 0 15px;
}

.col-1 {
  flex: 1;
}

.col-2 {
  flex: 2;
}

.col-3 {
  flex: 3;
}

.col-4 {
  flex: 4;
}

.col-5 {
  flex: 5;
}

.col-6 {
  flex: 6;
}

.col-7 {
  flex: 7;
}

.col-8 {
  flex: 8;
}

.col-9 {
  flex: 9;
}

.col-10 {
  flex: 10;
}

.col-11 {
  flex: 11;
}

@media (max-width: 767px) {
  .row {
    display: block;
  }
}


Моей ошибкой было, что я пытался скопировать чужие решения, а не придумать свое. Пример тут.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесплатный Сервис для создания блога для программиста khusamov Оффтопик 34 27.05.2015 18:28
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Событие при изменении размера окна в диапазоне (для адаптивной верстки) spo Общие вопросы Javascript 4 02.10.2014 15:51
drag-and-drop и position:fixed dotwatt Элементы интерфейса 5 05.12.2012 07:44
IDE для Java Script constant Библиотеки/Тулкиты/Фреймворки 0 27.09.2012 09:31