«Моя территория мысли»

Простая CSS сетка без тяжелых фреймворков

  • Разработка

  • 10 Март 2017

  • 60

  • 0

Простая CSS сетка без тяжелых фреймворков

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

Первым делом необходимо запустить браузерную консоль:

Дальше нам понадобится скрипт, который «напишет» за нас CSS сетку:

var column = 1, gridSize = 12, dump = '';

for (; column <= gridSize; column++)
{
	dump += "\n.grid .column-" + column + " {\n\twidth: " + parseFloat(column / gridSize * 100).toFixed(5) + "%;\n}";
}

console.log(dump);

После чего необходимо запустить такой скрипт в браузерной консоли, и получить CSS сетку в виде результата:

.grid .column-1 {
	width: 8.33333%;
}
.grid .column-2 {
	width: 16.66667%;
}
.grid .column-3 {
	width: 25.00000%;
}
.grid .column-4 {
	width: 33.33333%;
}
.grid .column-5 {
	width: 41.66667%;
}
.grid .column-6 {
	width: 50.00000%;
}
.grid .column-7 {
	width: 58.33333%;
}
.grid .column-8 {
	width: 66.66667%;
}
.grid .column-9 {
	width: 75.00000%;
}
.grid .column-10 {
	width: 83.33333%;
}
.grid .column-11 {
	width: 91.66667%;
}
.grid .column-12 {
	width: 100.00000%;
}

Осталось только описать CSS класс .grid, и можно пользоваться:

.grid {
	margin-left: -10px;
	margin-right: -10px;
}
.grid:after {
	content: "";
	display: table;
	clear: both;
}

Скачать CSS сетку.
Скачать генератор CSS сетки.

Спасибо за внимание!

Комментарии