Добрый день, Гость! Представляем Вам наши форумы. Вы можете зарегистрироваться чтобы писать на форумах или зайдите под своим именем, если Вы уже регистрировались.
   
   


Форум
 SX CMS | Основная тема
         CSS SX Сетка ( grid.css )

Похожие темы

CSS SX Сетка ( grid.css )


События Четверг, 01.03.2018, 09:33

mrX

Группа: Администратор
Cообщений: 140
Регистрация: 26.08.2015
Город: Cочи
Здесь обсуждаем Сетку.


Благодарности Kurman


Пользователь офлайн
События Четверг, 01.03.2018, 09:36

mrX

Автор текущей темы
Группа: Администратор
Cообщений: 140
Регистрация: 26.08.2015
Город: Cочи
Сам использую в данный момент http://flexboxgrid.com
код https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/master/dist/flexboxgrid.css
,но кое что убрал и добавил в оригинал


Благодарности Kurman
Пользователь офлайн
События Воскресенье, 18.03.2018, 23:57

SX

Группа: Администратор
Cообщений: 2971
Регистрация: 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;
}
}



Предлагаем дополнения


Пользователь офлайн


Похожие темы  |   Предыдущая тема  |   Следующая тема

Быстрый переход:  
 

 Сейчас на сайте

Пользователей: 0, Гостей: 16

Поисковые боты: 44
oBot(10), Bot(24), Crawler(2), Googlebot(4), BingBot(3), Yandex
 Статистика форума

  Темы Сообщения Пользователи
За сутки:
За неделю:
За месяц:
Всего:
Мы приветствуем нового участника: dostup jenchin
 Дни рождения

Valentinus (41), vsk_web (28)
Copyright © 2009 - 2018 SX All rights reserved | Powered by SX CMS 1.06 UTF | Контакты