Где я могу найти только адаптивную сетку
Я начал новый проект, и мне нужна (только) адаптивная сетка для макета.
Я пытался с http://www.responsivegridsystem.com/ этой сеточной системой, и это нормально, но она добавляет некоторые классы для входных данных и другие элементы, которые мне не нужны, и создает беспорядок в некоторых моих формах.
Я ищу любое решение.
Мне нужна просто адаптивная сетка, которая не будет связываться с другими элементами.
Есть ли такие рамки?
2 ответа
Может быть, вы можете использовать дисплей: гибкий, настройка min-height
min-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 в вашей разметке. О, и мы упоминали, что это отзывчиво?