Как создать собственную чувствительную систему css grid?

-1

Я хочу создать собственную настраиваемую систему grid scss, например 960.gs, bootstrap и т. Д., И я хочу создать свою собственную систему.Как создать собственную чувствительную систему css grid?

Итак, я только начинаю и пытаюсь выяснить.

Рассчитайте левую и правую обивку 15px и мою общую ширину 960px.

Моя формула расчета

960px - 30px (левый-правый обивка) = 930px

Моя сетка 12 колонка

930/12 = 77,5px

Процент расчет:

для моего одного colum (77,5/930) X 100 = 8,33%

но мой один столбец

.container .kol1 { width:5.208333333333333%;}

Я calculte его с генератором CSS сетки онлайн. Я думаю, что что-то неправильное в моей формуле.

Я попытался сделать этот метод, но я столкнулся с некоторыми проблемами. Что такое лучший метод расчета? или Каковы ваши предпочтительные методы?

Ниже мой пример кода CSS:

.container   { position:relative; padding-left:15px; padding-right:15px; margin:0 auto; } 
    .container   { width:960px; } 


    .container .kol1, 
    .container .kol2, 
    .container .kol3, 
    .container .kol4, 
    .container .kol5, 
    .container .kol6, 
    .container .kol7, 
    .container .kol8, 
    .container .kol9, 
    .container .kol10, 
    .container .kol11, 
    .container .kol12 { margin-left:1.5625%; margin-right:1.5625%; float:left; display:inline; margin-bottom:30px; background-kolor:#f8f8f8; text-align:center; padding:30px 0;} 

    .container .kol1 { width:5.208333333333333%;} 
    .container .kol2 { width:13.54166666666667%;} 
    .container .kol3 { width:21.875%;} 
    .container .kol4 { width:30.20833333333333%;} 
    .container .kol5 { width:38.54166666666667%;} 
    .container .kol6 { width:46.875%;} 
    .container .kol7 { width:55.20833333333333%;} 
    .container .kol8 { width:63.54166666666666%;} 
    .container .kol9 { width:71.875%;} 
    .container .kol10 { width:80.20833333333333%;} 
    .container .kol11 { width:88.54166666666666%;} 
    .container .kol12 { width:96.875%;}

Я думаю, что моя математика плохо :)

UPDATE:

Привет,

Я думаю, это был плохой вопрос. Я отвечу на мой вопрос.

Я создал калькулятор для этой системы сетки.

Введите размер контейнера и его размер, он рассчитает его для вас. Если ваш номер столбца более 12, то вы должны добавить строку на калькулятор :)

Мой известково ссылка here

источник

2014-02-12 Erdal Bakkal

Почему вы не хотите использовать загрузчик или что-то известный и сильный? Просто знать. – Vadorequest

Я просто пытаюсь научиться системе абсолютно :) bootstrap - очень хорошая система. Я хочу знать, как эти вычисления –

Ваш калькулятор вычесть маржу от вашего 8,33%.

8,333333333333333% - 1,5625% - 1,5625% = 5,208333333333333%

источник

2014-02-12 14:58:29 BastianW

Эй, @BastianW да, кажется, и спасибо за ответ. Мы можем его вычислить. Мне нужна формула для их практического применения. Давайте забудем мой пример, как мы можем его вычислить? Наша ширина контейнера 960px и 12 grid. Как ваша формула для 12 сетки и отступов? Можете ли вы уточнить свой ответ :) –

знакомы с lesscss? Тогда я бы построил некоторые функции.Но, как сказал Вадорекест, все это сделано с помощью бутстрапа и других фреймворков frontend ^^ – BastianW

Но если вы хотите сделать это без lesscss, просто поместите свои вычисления в свой css. kol1 => 8,33333%, kol2 => kol1 * 2, ... и удалить поля. Не так сложно;) – BastianW

Как создать собственную чувствительную систему css grid?

ответ

Смежные вопросы