| Группа: Администратор Регистрация: 23.10.2009 | Как вижу я основное в сетке. Еще добавить брекпоинты, но они почти всегда идентичны основным столбцам, добавим потом.
/* ==================== Сетка ==================== */
.container {
margin-left: auto;
margin-right: auto;
padding-left: .5rem;
padding-right: .5rem;
width: 100%;
}
.container.grid-xl {
max-width: 1296px;
}
.container.grid-lg {
max-width: 976px;
}
.container.grid-md {
max-width: 856px;
}
.container.grid-sm {
max-width: 616px;
}
.container.grid-xs {
max-width: 496px;
}
.row, .column {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
flex: 0 1 auto;
max-width: 100%;
}
.row {
flex-direction: row;
}
.row.reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column.reverse {
flex-direction: column-reverse;
}
.col-auto {
flex: 1 1 auto;
width: auto;
}
.col-1 {
flex: 0 0 8.333%;
max-width: 8.333%;
}
.col-2 {
flex: 0 0 16.667%;
max-width: 16.667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.col-5 {
flex: 0 0 41.667%;
max-width: 41.667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.333%;
max-width: 58.333%;
}
.col-8 {
flex: 0 0 66.667%;
max-width: 66.667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.333%;
max-width: 83.333%;
}
.col-11 {
flex: 0 0 91.667%;
max-width: 91.667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.shift-1 {
margin-left: 8.333%;
}
.shift-2 {
margin-left: 16.667%;
}
.shift-3 {
margin-left: 25%;
}
.shift-4 {
margin-left: 33.333%;
}
.shift-5 {
margin-left: 41.667%;
}
.shift-6 {
margin-left: 50%;
}
.shift-7 {
margin-left: 58.333%;
}
.shift-8 {
margin-left: 66.667%;
}
.shift-9 {
margin-left: 75%;
}
.shift-10 {
margin-left: 83.333%;
}
.shift-11 {
margin-left: 91.667%;
}
.show-xs, .show-sm, .show-md, .show-lg, .show-xl {
display: none !important;
}
@media (max-width: 1280px) {
.hide-xl {
display: none !important;
}
.show-xl {
display: block !important;
}
}
@media (max-width: 960px) {
.hide-lg {
display: none !important;
}
.show-lg {
display: block !important;
}
}
@media (max-width: 840px) {
.hide-md {
display: none !important;
}
.show-md {
display: block !important;
}
}
@media (max-width: 600px) {
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
}
@media (max-width: 480px) {
.hide-xs {
display: none !important;
}
.show-xs {
display: block !important;
}
}
|
Предлагаем дополнения
|
Форум
Пользователи
Помощь
Поиск
Новые сообщения
Новые темы
Показать все сообщения
Четверг, 01.03.2018, 09:36 
Сейчас на сайте
Статистика форума
Дни рождения