Где я могу найти только адаптивную сетку

Я начал новый проект, и мне нужна (только) адаптивная сетка для макета.
Я пытался с http://www.responsivegridsystem.com/ этой сеточной системой, и это нормально, но она добавляет некоторые классы для входных данных и другие элементы, которые мне не нужны, и создает беспорядок в некоторых моих формах.
Я ищу любое решение.

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

Есть ли такие рамки?

2 ответа

Может быть, вы можете использовать дисплей: гибкий, настройка min-heightmin-width для детей, чтобы сохранить в безопасности минимальный размер, где мало контента.

http://codepen.io/gc-nomade/pen/wFHfq

Чтобы IE 10/11 тоже работал, вам нужно добавить ширину или высоту к основному контейнеру. Большую часть времени width:100% сделаю, здесь я установил height:100% на body,

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

body  div {
  display:flex;/* flex it */
  flex-wrap:wrap;
  min-width:320px;
  min-height:160px;
  box-shadow:inset 0 0 5px white, 2px 2px 3px;
flex:1;
}
html,body {
  height:100%;/*IE*/
  margin:0;
}
body>div {
  min-height:100%; 
}
div div {
background:pink;
}
div div:nth-child(even) {
  background:lightgray
} 

ОСНОВНОЙ ТЕСТ HTML:

<div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <!-- and so on -->
</div>

Попробуйте http://semantic.gs/

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

Все без каких-либо классов.grid_x в вашей разметке. О, и мы упоминали, что это отзывчиво?

Другие вопросы по тегам