It is commonly assumed that the question of the grid was settled back in the twentieth century: the Swiss worked it all out, and all that is left for us is to use it carefully. Fortunately, this is a great misconception — and within the short span of this essay I will try to show why, and to explain the causes behind the transformation of the grid and of our attitude towards it.

Принято считать, что вопрос сетки закрыт ещё в XX веке: мол, швейцарцы всё решили, а нам осталось аккуратно пользоваться. К счастью, это большое заблуждение — и я попытаюсь в кратком формате этой статьи показать, что это не так, и объяснить причины, которые стоят за трансформацией сетки и отношения к ней.

Let us start at the very beginning.
Around 1940 Max Bill first applied a modular grid to book layout, earning the well-deserved title of “father of the grid.” In the second half of the twentieth century Josef Müller-Brockmann took the grid approach to a religious strictness: a grid of 8 modular cells, then 20, then 32. For him the module was “an expression of the will to order and clarity, of objectivity instead of subjectivity.” But inside the new religion lived a curious paradox: the more detailed the grid, the more freedom it gave the designer. And still every layout was assembled and approved by a human — so the demands on the designer’s professionalism and competence kept growing.

Начнём с самого начала.
Около 1940 года Макс Билл впервые применил модульную сетку в книжной вёрстке, за что заслуженно получил титул «отца сетки». Во второй половине XX века Йозеф Мюллер-Брокманн довёл сеточный подход до религиозной строгости: сетка на 8 модульных клеток, потом на 20, потом на 32. Модуль для него был «проявлением воли к порядку и ясности, объективности взамен субъективности». Но внутри новой религии поместился интересный парадокс: чем выше детализация сетки, тем больше свободы дизайнеру она давала. При этом каждый макет всё равно собирал и утверждал человек, а следовательно, росли требования к профессионализму и компетентности дизайнера.

The religion proved contagious and spread beyond Switzerland. For his devotion to modular order, the Dutchman Wim Crouwel received from his colleagues the nickname Mr. Gridnik — and accepted it like a holy title: the name was later given to his typeface designed for Olivetti typewriters. The utmost point of Crouwel’s faith is the Vormgevers poster for the Stedelijk Museum in Amsterdam (1968): a grid of 57 vertical and 41 horizontal lines is not hidden beneath the layout but printed at full height, and the letters themselves are built out of its cells. The instrument of markup became the image: the grid ceased to be a means of order and turned into its manifesto.

Религия оказалась заразительной и вышла за пределы Швейцарии. Голландец Вим Кроувел за преданность модульному порядку получил от коллег прозвище Mr. Gridnik — «господин Сеточник» — и принял его как сан: этим именем позже назвали его шрифт, разработанный для пишущих машинок Olivetti. Предельная точка веры Кроувела — плакат Vormgevers для амстердамского музея Стеделейк (1968): сетка из 57 вертикальных и 41 горизонтальной линии не спрятана под вёрсткой, а напечатана в полный рост, и сами буквы сложены из её клеток. Инструмент разметки стал изображением: сетка перестала быть средством порядка и сделалась его манифестом.

In essence, the grid of that era is a blueprint. A table of ready-made positions, measured out from edge to edge of the sheet’s format. It could be perfect because everything was known in advance: the format trimmed, the text written and delivered. To use an analogy, the grid of that time is like a suit tailored to an individual measure: the tailor knows the client’s figure before the first cut — and as long as there is one figure, the pattern can be flawless.

По сути, сетка той эпохи — чертёж. Таблица готовых позиций, просчитанная от края до края формата листа. Она могла быть совершенной, потому что всё было известно заранее: формат обрезан, текст написан и сдан. Если использовать аналогию, то сетка того времени похожа на костюм, сшитый по индивидуальной мерке: портной знает фигуру заказчика до первого разреза — и пока фигура одна, лекала могут быть безупречны.

Brockmann’s own practice was that of such a tailor — he himself described his method as a fitting: design the grid, test it against real material; yes — into production, no — back to the drawing board, and so on until it sits perfectly. The work, then, was a process of constant shuttling between the material already known and the grid of the layout to come. So one may say the grid here was built after the fact — out of the material already lying on the table. I have used this myself in teaching, as an example of the classical principle laid down by Brockmann himself — the principle of the priority of composition over the grid (the principle of good form, in R. Arnheim’s terms). Simply put: composition first, the grid second.

Работа Брокманна сравнима с работой такого портного — он сам описывал свой метод как примерку: спроектировать сетку, проверить её на реальном материале; да — в работу, нет — назад к чертежу, и так до полной посадки. То есть работа представляла собой процесс постоянной перебежки между уже известным материалом и сеткой будущего макета. Поэтому можно сказать, что сетка здесь строилась как бы задним числом — из того материала, что заранее лежит на столе. Лично я использовал это в преподавании как пример работы классического принципа, заложенного самим Брокманном, а именно принцип приоритета композиции над сеткой (принцип хорошей формы у Р. Арнхейма). Проще говоря, сначала композиция – потом сетка.

In 1962 Karl Gerstner was working on Capital magazine — and a magazine runs for years; what future issues will hold, nobody knows. The grid approach collided with uncertainty, and Gerstner answered it with reserve. His grid still makes an indelible impression on beginning designers, for it seems charmingly intricate, though in essence it is a deeply considered automaton of variability. The page is engineered from 58 micro-units and divides without remainder into 2, 3, 4, 5 or 6 columns — that is, Gerstner defined not so much a grid as a program of variability for the grid. He put it himself: the grid is “a programme for content as yet unknown.” Gerstner was the first to design a rule that generates layouts, rather than a layout that generates rules.

В 1962 году Карл Герстнер работал над журналом Capital — а журнал выходит годами, и, соответственно, что будет в будущих номерах, не знает никто. Сеточный подход столкнулся с неопределённостью, и Герстнер ответил на неё запасом. Эта сетка до сих пор производит неизгладимое впечатление на начинающих дизайнеров, поскольку кажется очаровательно сложной, хотя по сути является глубоко продуманным автоматом вариативности. Полоса спроектирована из 58 микроединиц и без остатка раскладывается на 2, 3, 4, 5 или 6 колонок — то есть Герстнер задал не столько сетку, сколько программу вариативности для сетки. Сам он сформулировал это так: сетка — «программа для пока ещё неизвестного содержания». Герстнер первым проектировал правило, порождающее макеты, а не макет, порождающий правила.

To push the tailoring analogy further: he moved from a made-to-measure suit to a pattern with a size run (a term, incidentally, from the same trade) — one construction yields size 44, 48 and 52 alike. Note: only the material was unknown; the magazine’s format itself stood still. And the cutting was still done by the designer-cutter: he looked at the material that had arrived for the issue and chose the variant that fitted best. The grid was conceived as a program, but the program was executed by a human — a compositor, by hand, issue after issue. Gerstner’s genius lies in having invented an automaton that for another half-century could not run without assistance.

Если развивать аналогию в портновских терминах: он перешёл от костюма по мерке к лекалам с размерной сеткой (кстати говоря, термин из той же области) — одна конструкция порождает и 44-й, и 48-й, и 52-й. Отмечу: неизвестен был только материал, сам формат журнала стоял неподвижно. И кроил по-прежнему закройщик-дизайнер: смотрел на пришедший в номер материал и выбирал вариант, который подходил лучше всего. То есть сетка мыслилась как программа, но саму программу выполнял человек — верстальщик, вручную, выпуск за выпуском. Гениальность Герстнера в том, что он придумал автомат, который ещё полвека не мог работать без посторонней помощи.

To see where the automaton finally started running on its own, we need to understand something about the grid itself.

Чтобы увидеть, где в конце концов заработал сам автомат, надо кое-что понять о самой сетке.

It has been defined in many ways: a framework, a skeleton, a system of guides or force lines — and all of these are at once close and wide of the mark. The term “framework,” say, better describes the support of a form, whereas the grid governs place and space as a whole.

Её определяли по-разному: каркас, скелет, система направляющих или силовых линий — и всё это и близко, и далеко одновременно. Так термин «каркас» больше подходит для описания поддержки формы, тогда как сетка распоряжается местом и пространством в целом.

So the grid is more accurately defined as a way of organising the space of the format — and the word “space” deserves to be underlined twice. While the format was a printed sheet, it sounded almost like a metaphor: the sheet is motionless, its space ends at its edges. Ruder himself, in his Typographie, avoided the term “space,” replacing it with the narrower “volume,” while the sheet he understood first of all as a plane. Incidentally, the Russian tradition, on the contrary, had been using the term “space” actively since the days of VKhUTEMAS — it figures in Favorsky and Florensky, in Ladovsky and Tarabukin, and in many others. Today the metaphor has materialised. The screen, virtual and quasi-virtual spaces — the format has become space literally: alive, stretching, changeable. And when the character of the space changes (of the format in the narrow sense), the way of organising it changes too — this is the key cause of the grid’s transformation. Layout technology merely answered the call.

Поэтому сетку правильнее определить как способ организации пространства формата — и слово «пространство» здесь надо подчеркнуть дважды. Пока формат был печатным листом, оно звучало почти метафорой: лист неподвижен, его пространство исчерпывается краями. Тот же Рудер в своей «Типографике» избегал термина «пространство» и заменял его более узким термином «объём», тогда как лист он понимал прежде всего как плоскость. К слову сказать, русская традиция, напротив, активно использовала термин «пространство» со времён ВХУТЕМАСа — он фигурирует и у Фаворского и Флоренского, Ладовского и Тарабукина, и у многих других. Сегодня метафора овеществилась. Экран, виртуальные и квазивиртуальные пространства — формат стал пространством буквально: живым, тянущимся, переменным. А когда меняется характер пространства (формата в узком смысле), меняется и способ его организации — это и есть ключевая причина трансформации сетки. А технологии вёрстки лишь ответили на этот вызов.

A sheet has an edge; a web page has none: everyone’s window has a width of its own. Opening a page, we know its width for certain, since we see the screen directly, while the height of a longread never coincides with the height of the screen. Speaking of the digital format, then, we must keep two formats in mind at once: the format of the screen as what we actually see, and the format of the longread as what is hidden and only thought behind the screen. This, incidentally, largely wrecks the compositional approach to page layout, since the compositional ties between the elements of the first screen and, say, the second, the third or the last are not evident to our “visual judgement” (R. Arnheim’s term).

У листа есть край, у веб-страницы края нет: ширина окна у каждого своя. Открывая страницу сайта, мы достоверно знаем её ширину, поскольку видим экран непосредственно, тогда как высота лонгрида с высотой экрана не совпадает. То есть, говоря о цифровом формате, мы должны иметь в виду сразу два формата: формат экрана как то, что мы реально видим, и формат лонгрида как то, что скрыто и мыслится за экраном. Это, кстати, во многом рушит композиционный подход к вёрстке страницы, поскольку композиционные связи между элементами первого экрана и, например, второго, третьего или последнего — неочевидны для нашего «визуального суждения» (тер. Р. Арнхейм).

During scroll the horizontals (force lines, lines of text) are always in motion, while the verticals stay static — which is why, by the way, they carry a predominantly navigational meaning: these are the lines along which the eye descends from top to bottom (assuming vertical scroll). The horizontal lines, in turn, become the bearings.

Горизонтали (силовые линии, линии текста) при скролле всегда подвижны, тогда как вертикали остаются статичными — и поэтому, кстати, несут по преимуществу навигационный смысл: это линии, по которым взгляд спускается сверху вниз (при условии вертикального скролла). Горизонтальные же линии становятся опорными.

The next important change: content arrives after the designer’s work is done. Like Gerstner, we must lay out in advance, under uncertainty: the headline will run twice as long as in the mockup; there will be now 7 cards, now 17. Layout and composition have to be resolved at the moment of display — and at that moment the designer is not there. The only one standing in for them is the browser — the code.

Следующее важное изменение: контент приходит после того, как дизайнер закончил работу. Мы, так же как и Герстнер, должны верстать наперёд, в условиях неопределённости, когда заголовок окажется вдвое длиннее макетного, карточек будет то 7, то 17. То есть раскладку и композицию нужно решать в момент показа, а дизайнера в этот момент нет. Единственный, кто за него, — браузер, код.

Design’s first answer to this uncertainty was the use of breakpoints: as a rule, we draw at least three mockups — phone, tablet, desktop — and switch between them by window width. In essence, this is the classical positional approach of print design stretched over the web: instead of one blueprint, three — and between them a void in which the layout waits for its next jump. Most people still work this way.

Первым ответом дизайна на эту неопределённость стало использование контрольных точек: как правило, мы рисуем как минимум три макета — телефон, планшет, десктоп — и переключаем их по ширине окна. По сути, это классический позиционный подход из печатного дизайна, натянутый на веб: вместо одного чертежа — три, а между ними пустота, в которой макет ждёт следующего скачка. Большинство работает так до сих пор.

Whereas an attempt to solve this problem by the digital means available to us leads to algorithms — executed not by the designer but by the browser.
Let me repeat: the uncertainty has become double — both the material and the format itself are unknown — and covering it with a reserve of variants is no longer possible: the variants are infinite, while fighting uncertainty by pre-digital means leads to what we already see around us — a uniformity which, as AI takes hold, stops creating added value and will therefore keep losing demand among prospective clients who want to stand out against the common backdrop of tile-and-card AI design.

Тогда как попытка решить эту проблему доступными нам цифровыми способами приводит нас к алгоритмам, которые выполняются не дизайнером, а браузером.
Повторю: неопределённость стала двойной — неизвестен и материал, и сам формат, — и покрыть её запасом вариантов уже нельзя: вариантов бесконечно много, а борьба с неопределённостью доцифровыми способами приводит к тому, что мы и так видим, — к однообразности, которая в условиях внедрения ИИ перестаёт создавать дополнительную стоимость, а следовательно, будет терять востребованность у потенциальных клиентов, которые хотят выделиться на общем фоне плашечного ИИ-дизайна.

How, then, is the question to be solved? The answer is simple: decide in the present tense. The designer defines the law; the law is fixed in algorithms that compute the positions of elements, or groups of elements, relative to one another and to the format as a whole; and the browser computes by the given algorithms at every opening of the page — in our analogy, the tailor has moved into the fitting room, and the suit is re-cut at the moment it is put on. A single line — repeat(auto-fit, minmax(240px, 1fr)) — counts by itself how many columns there are today. And that is precisely the decision Gerstner used to make by hand, every time — issue after issue, number after number.

Как же решить этот вопрос? Ответ прост: решать в настоящем времени. То есть дизайнер определяет закон, этот закон фиксируется в алгоритмах просчёта позиций элементов или групп элементов относительно друг друга и формата в целом, а браузер считает по заданным алгоритмам при каждом открытии страницы — по нашей аналогии, портной переехал в примерочную, и костюм перекраивается в момент, когда его надевают. Одна строка — repeat(auto-fit, minmax(240px, 1fr)) — сама считает, сколько сегодня колонок. И это то самое решение, которое Герстнер принимал вручную каждый раз — выпуск за выпуском, из номера в номер.

A classical metric grid defines ready-made positions; an algorithmic one gives a way of computing them. Roughly speaking: blueprint versus function.

Классическая метрическая сетка определяет готовые позиции, алгоритмическая — даёт способ их вычисления. Грубо говоря: чертёж против функции.

The difference is easy to show on everyday material. Take ten people: each has a first name, a family name, a patronymic. The metric approach lays them out as a table: three columns — first name, family name, patronymic — with numbers down the side; every element gets a ready position, measured geometrically. The algorithmic approach defines a chain instead of positions: the first names line up along one shared line; the family name begins where the first name ended — and ten pixels lower; the patronymic — where the family name ended, and ten lower still. Write this out for all ten — and the line of the build comes out original for each: the names differ in length, and the chain breaks anew every time. Against the vertical, a living line appears. This principle has a name — conjugation: an element’s position is not assigned but determined by the neighbouring element it is conjugated with — the previous one, the next one, or the one standing beside it. Text that builds itself; images that build a modular longread anew every time, depending on their own nature (horizontal, vertical or square) and on the parameters of the browser window — and of the medium on which the site is opened.
Notice: nobody assigned the positions — they are computed out of the material itself.

Разницу легко показать на бытовом материале. Возьмём десять человек: у каждого — имя, фамилия, отчество. Метрический подход разложит их таблицей: три колонки — имя, фамилия, отчество, по вертикали — номера; каждый элемент получает готовую позицию, промеренную геометрически. Алгоритмический подход вместо позиций задаст цепочку: имена выстраиваются по одной общей линии; фамилия начинается там, где закончилось имя, — и на десять пикселей ниже; отчество — там, где закончилась фамилия, и ещё на десять ниже. Пропишем так всех десятерых — и линия построения у каждого окажется оригинальной: имена разной длины, и цепочка всякий раз ломается по-новому. Относительно вертикали появляется живая линия. У этого принципа есть имя — сопряжение: позиция элемента не назначается, а определяется соседним элементом, с которым он сопряжён, — предыдущим, следующим или стоящим рядом. Текст, который строит сам себя, изображения, которые строят модульный лонгрид каждый раз по-новому в зависимости от своей природы (горизонтальные, вертикальные или квадратные) и параметров окна браузера и в целом носителя, на котором открывается сайт.
Заметьте: позиции никто не назначал — они вычисляются из самого материала.

Let me note that I am in no way opposing the classics to the digital, positional metric grids to algorithmic ones. Metric and position have not gone anywhere. The accent has shifted: from the geometric to the mobile. And this, in turn, gave the grid what Wolfgang Weingart — the famous rebel of the Basel school, who dreamed of a living, free typography — spoke of back in 1972. But where Weingart pulled the living line by hand — through bending and breaking the rules, each breach demanding justification — today it can arise without hands: from a designer who thinks through the algorithm it lives by. The plasticity of the grid has ceased to be a violation of order and become its product. The designer’s task changes with it: not to compose and describe in rules, but to conceive a principle and realise it in an algorithm. “A column no narrower than 240” is an optical decision taken by the designer before the encounter with the case, because at the moment of that encounter the designer and their eye will not be around.

Замечу, что я ни в коем случае не противопоставляю классику и цифру, позиционные метрические сетки и алгоритмические сетки. Метрика и позиция никуда не исчезли. Сместился акцент: с геометрического на подвижное. А это, в свою очередь, подарило сетке то, о чём ещё в 1972 году говорил Вольфганг Вайнгарт, известный бунтарь базельской школы, мечтавший о живой, свободной типографике. Но там, где Вайнгарт тянул живую линию руками — через искривление и нарушение правил, которое каждый раз требовало обоснования, — сегодня может создаваться без рук: дизайнером, который продумывает алгоритм, по которому она живёт. Пластичность сетки перестала быть нарушением порядка и стала его продуктом. Задача дизайнера при этом меняется: не скомпоновать и описать в правилах, а задумать принцип и реализовать его в алгоритме. «Колонка не уже 240» — оптическое решение, принятое дизайнером ещё до встречи со случаем, потому что в момент самой встречи дизайнера с его оптикой рядом не будет.

The algorithmic approach is directly connected to the classical metric (positional) one: it stands on it and extends it in time. Gerstner described the goal of the grid approach as a parameter with “the greatest number of constant factors combined with the greatest possible variability” — the grid as a parameter of balance between uniformity and variety. And within that balance the algorithmic grid pursues the same aspiration, taken to its technological limit. The classics have not aged out; they have transformed: the blueprint became a program, the program became a law. The principle, meanwhile, stays where it has always been — with the designer: they conceive the principle, derive the rules from it, and that body of rules runs in the browser as law — computed, now, by the machine.

Алгоритмический подход напрямую связан с классическим метрическим (позиционным) подходом: опирается на него и развивает его во времени. Герстнер описывал цель сеточного подхода как параметр с «самым большим числом постоянных факторов, объединённых с самой большой изменчивостью» — сетка как параметр баланса между единообразием и вариативностью. И в рамках этого баланса алгоритмическая сетка реализует то же стремление, доведённое до технологического предела. Классика не устарела, она трансформировалась: чертёж стал программой, программа — законом. Принцип же остался там, где был всегда, — у дизайнера: он задумывает принцип, выводит из него правила, и этот свод правил работает в браузере как закон — вычисляет его уже машина.

Very well. But what does it look like, this algorithmic grid?
The subtlety is that an algorithmic grid is rather hard to see. About as hard as seeing the order in the bark of a tree. In a static mockup it simply is not there — its essence is behaviour, what happens when you pull the window by its edge. Which is why learning it from a picture is like learning music from a photograph of a single chord. And why it has only truly opened up now, when a designer can assemble a working grid in code with words and pull the edge of the window themselves. With no intermediary between them and the result.

Ну хорошо. А как она выглядит, эта алгоритмическая сетка?
Тонкость в том, что алгоритмическую сетку довольно сложно увидеть. Примерно так же, как увидеть порядок в коре дерева. В статичном макете её просто нет — её суть в поведении, в том, что происходит, когда тянешь окно за край. Поэтому учить её по картинке — как учить музыку по фотографии одного аккорда. Поэтому по-настоящему она открылась только сейчас, когда дизайнер может словами собрать работающую сетку в коде и сам потянуть за край окна. Без посредника между собой и результатом.

How this looks in action I will show on our own model — the Mapa Grid photo gallery, laid out by vibe-coding.

Но как это выглядит в деле, покажу на нашей собственной модели — фотогалерее Mapa Grid, свёрстанной на вайб-кодинге.

This layout was designed some five years ago, commissioned by an architecture bureau. At that moment I ran into a difficulty:
On the one hand, the client asked that the catalogue page of their works create a feeling of chaos — and this could be achieved by hand, but I understood that as soon as the layout fell into another designer’s hands, they would ruin it all: every designer has taste settings of their own, and changing them kills the layout as a whole — it turns eclectic and loses its unity.

Данный макет был спроектирован ещё лет пять назад под заказ для архитектурного бюро. В тот момент я столкнулся со сложностью:
С одной стороны, клиент просил, чтобы страница каталога работ создавала ощущение хаотичности, и этого можно было добиться ручным способом, но я понимал, что как только макет попадёт в руки другого дизайнера, то он всё испортит, поскольку у каждого дизайнера свои вкусовые настройки, и их смена убивает макет в целом — макет станет эклектичным и потеряет единообразность.

On the other hand, since the architecture bureau was a rather old one, its works were many, and no standards for recording the results of the work ever existed — or exist now. So their archive was a collection of images of every possible proportion: photographs (vertical and horizontal, of all ratios) and cropped renders of 3D models.

С другой стороны, поскольку архитектурное бюро было довольно старым, то и работ у них было множество, а никаких стандартов фиксации результатов работы не было и нет. Поэтому архив их работ представлял собой набор изображений разной пропорциональности. Это и фотографии (вертикальные/горизонтальные всех возможных пропорций), и кропнутые рендеры трёхмерных моделей.

My experience said that some standardisation of the whole photo archive was needed — but, first, that is an enormous amount of work, and second, it would mean the client having to build this process into their own processes and police the observance of the rules.
The solution came as a general question: how do you make the bug become the feature? Not standardise the proportions of the images, but amplify the effect and put it to use? I needed a layout that would give a feeling of arbitrariness while obeying a law executed at the level of code.

Мой опыт говорил о том, что необходима некая стандартизация всего фотоархива, но, во-первых, это огромная работа, во-вторых, это означало бы и то, что клиенту пришлось бы внедрять этот процесс в свои процессы, следить за исполнением этих правил.
Решение пришло как общий вопрос: как сделать так, чтобы баг стал фичей? Не стандартизировать пропорции изображений, а усилить этот эффект и использовать в своих целях? Мне была необходима вёрстка, которая давала бы ощущение произвольности, но при этом подчинялась бы закону, который исполнялся бы на уровне кода.

Thus the layout was born of a single rule: fit the photo into a square module. From there the rules hooked onto one another: the photo’s orientation decides which edge of the module it is pressed against; the caption is conjugated with the photo’s left edge: it starts from it and travels with it; the force lines are computed from the width of the scene, and their number sets the format — four on desktop, three on tablet, two on the phone; after every three rows the ribbon inserts a big module: on wide formats it is a square as tall as the screen, on the phone it stands full-width, flush, its height dictated by the proportion of the picture itself. Not a single position is assigned — all are computed. Especially for you, the layout has a panel of controls: module size, gap, offset, scene width — plus the format buttons 360 / 768 / 1440, which reassemble the strip without stretching the window. Change a parameter — and the whole composition reassembles before your eyes. Gerstner’s programme, which has at last acquired an executor.

Таким образом, макет родился из одного правила: вписать фото в квадратный модуль. Дальше правила цеплялись одно за другое: ориентация фото решает, к какой границе модуля его прижать; подпись сопряжена с левым краем фото: начинается от него и уезжает вместе с ним; силовые линии считаются от ширины сцены, а их число задаёт формат — четыре на десктопе, три на планшете, две на телефоне; после каждых трёх строк лента вставляет большой модуль: на широких форматах это квадрат в высоту экрана, на телефоне он встаёт во всю ширину встык, и высоту ему диктует пропорция самой картинки. Ни одна позиция не назначена — все вычисляются. Специально для вас в макете есть панель с контролами: размер модуля, просвет, смещение, ширина сцены — плюс кнопки форматов 360 / 768 / 1440, которые пересобирают полосу без растягивания окна. Если менять параметр — вся композиция пересобирается на глазах. Герстнеровская программа, у которой появился исполнитель.

The way the model computes its sizes deserves a word of its own. The numbers in its law are conventional units. Each format has a reference width: phone 390, tablet 768, desktop 1440 — and all the parameters (module, gap, offset, margins) are set for the reference. The “360” button sets a scene narrower than the reference — and it is exactly this difference that the coefficient works out. At any other width the law multiplies them by the coefficient “scene divided by reference.” The 300 module is in essence a share: a little over a fifth of the scene. Change the format — and the strip recomputes proportionally, keeping its fill; cross a format boundary — and the law switches to another set of numbers. Here the principles of “shares” and “the break” from the list below work as a pair. Gerstner had a reserve of ready variants — here, a reference and a coefficient.

Отдельного слова заслуживает то, как модель считает размеры. Числа в её законе — условные единицы. У каждого формата есть эталонная ширина: телефон 390, планшет 768, десктоп 1440 — и все параметры (модуль, просвет, смещение, поля) заданы для эталона. Кнопка «360» ставит сцену уже эталона — коэффициент как раз и отрабатывает эту разницу. На любой другой ширине закон умножает их на коэффициент «сцена, делённая на эталон». Модуль 300 — это по сути доля: чуть больше пятой части сцены. При изменении формата — полоса пересчитается пропорционально, и заполнение сохранится; пересечёшь границу формата — закон переключается на другой набор чисел. Здесь в паре работают принципы «доли» и «перелом» из перечня ниже. У Герстнера был запас готовых вариантов — здесь эталон и коэффициент.

One more detail worth attention: this grid has no columns. Turn the grid on in the live model (the button in the top right corner) — the first three verticals stand at an equal step, while the distance from the last one to the right edge is already smaller. In the tablet version of the layout you can observe the opposite — the right “column” is wider than those on the left: there is no classical metric grid here. A column is a band with a width of its own, an inheritance of the printed page. Here, instead of columns, there are force lines on which the modules rest: a line has a position, but no width.

Отдельная деталь, на которую хочется обратить внимание: в этой сетке нет колонок. Включите сетку в живой модели (кнопка в правом верхнем углу) — первые три вертикали стоят на одинаковом шаге, а от последней до правого края расстояние уже меньше. В планшетной версии вёрстки вы можете наблюдать обратное — правая «колонка» шире тех, что слева: классической метрической сетки здесь нет. Колонка — это полоса с собственной шириной, наследство печатной полосы. Здесь вместо колонок — силовые линии, на которые модули опираются: у линии есть позиция, но нет ширины.

A caveat first: this is not a revolution and not a new style, but a degree of algorithmicity. The scale is simple. The blueprint — the positions are placed by hand, and at another width they are placed again. Breakpoints — three blueprints with emptiness between them, in which the layout waits for the next jump. The law — the position is computed at the moment the page is opened. Almost any page today already stands somewhere on this scale; the question is not “algorithmic or not,” but how far along it has travelled.

Сразу оговорюсь: речь не о революции и не о новом стиле, а о степени алгоритмичности. Шкала простая. Чертёж — позиции назначены руками, и на другой ширине их назначают заново. Контрольные точки — три чертежа и пустота между ними, в которой макет ждёт следующего скачка. Закон — позиция вычисляется в момент открытия страницы. Почти любая сегодняшняя страница уже стоит где-то на этой шкале; вопрос не «алгоритмическая или нет», а как далеко по ней ушли.

The algorithmic approach sounds more complicated than it is. Behind constructions of this kind stands a small set of principles — for now I will name them only by name, without analysis:

Алгоритмический подход звучит сложнее, чем устроен. За построениями такого рода стоит небольшой набор принципов — назову их пока только по именам, без разбора:

• shares — proportions instead of fixed sizes: 2fr 1fr;
• the corridor — bounds inside which the value flows by itself: clamp(1rem, 4vw, 2rem);
• the recount — the composition of the layout is computed from the window: repeat(auto-fit, minmax(240px, 1fr));
• the break — a qualitative rebuild at a named point;
• size from content — the cell listens to its own material: max-content 1fr;
• conjugation — an element’s position is determined by its neighbour;
• force lines — a support that has a position but no width;
• computation instead of measurement — the layout is derived from constants and proportions, before rendering.

• доли — пропорции вместо фиксированных размеров: 2fr 1fr;
• коридор — границы, внутри которых значение течёт само: clamp(1rem, 4vw, 2rem);
• пересчёт — состав раскладки считается от окна: repeat(auto-fit, minmax(240px, 1fr));
• перелом — качественная перестройка в названной точке;
• размер от содержимого — ячейка слушает свой материал: max-content 1fr;
• сопряжение — позиция элемента определяется соседом;
• силовые линии — опора, у которой есть позиция, но нет ширины;
• вычисление вместо замера — раскладка выводится из констант и пропорций, до отрисовки.

A principle and a law are different things, even where the names coincide. A principle is the designer’s move of thought: what they set the size with, where they take the position from, what they lean on. A law is what the layout does on the page, named in words; it always answers two questions — what it looks at, and how it responds. A principle is chosen; a law works.

Принцип и закон — разные вещи, даже там, где имена совпадают. Принцип — ход мысли дизайнера: чем он задаёт размер, откуда берёт позицию, на что опирается. Закон — то, что раскладка делает на странице, названное словами; у него всегда два вопроса: на что смотрит и как отвечает. Принцип выбирают, закон работает.

Three neighbouring names are worth separating at once. A force line is a support without width, onto which an element stands. Coupling is a position taken from the neighbour along a chain. A force field is constant attraction and repulsion, in which the layout finds its own equilibrium.

Три соседних имени стоит развести сразу. Силовая линия — опора без ширины, на которую элемент встаёт. Сцепление — позиция от соседа по цепочке. Силовое поле — постоянное притяжение и расталкивание, при котором раскладка сама приходит к равновесию.

And out of the principles, laws are composed — the rules by which a page assembles itself. The map as of today is fifteen laws. Its rows are what the law looks at; its columns are how it responds: with a click (rebuilt all at once), in steps (one at a time), or smoothly (flowing continuously). A tick marks the laws already run in on a test stand; a circle marks candidates — you may take one, but your stand becomes its first precedent.

А из принципов складываются законы — правила, по которым страница собирает себя сама. Карта на сегодня — пятнадцать законов. Строки карты — на что закон смотрит, столбцы — как отвечает: щелчком (перестроился разом), ступеньками (шаг за шагом) или плавно (течёт непрерывно). Галочкой отмечены те, что уже обкатаны на стендах, кружком — кандидаты: взять можно, но стенд станет первым прецедентом.

Each deserves a study of its own — with examples, test stands and experiments. We will certainly be studying and trying them live — in the working groups that start in September.

Каждый заслуживает отдельного разбора — с примерами, стендами и экспериментами. Мы обязательно будем изучать и пробовать вживую — в рабочих группах, которые стартуют в сентябре.

So the algorithmic approach is an evolutionary development of the classical positional one — from “father and son,” from Max Bill and Brockmann, through Gerstner, Weingart and Kunz, down to you and me. The evolution is tied above all to the change of the format itself (of the space) — the passage from the static to digital adaptivity — and, as a consequence, to the growth of uncertainty in the work itself. Algorithmic grids do give the living line Weingart dreamed of, but the main thing lies elsewhere: they change not the amount of the designer’s labour, but its kind. The work moves out of every single layout and into one law — you have to think longer and earlier, but only once. Along the way, the same practice greatly simplifies vibe-coding — there is a separate text about that: “Vibe-coding — Catch the Wave!”

Итак, алгоритмический подход — эволюционное развитие классического позиционного, от «отца и сына», от Макса Билла и Брокманна, через Герстнера, Вайнгарта и Кунца — к нам с вами. Эволюция связана прежде всего с изменением самого формата (пространства) — переходом от статичности к цифровой адаптивности — и, как следствие, с ростом неопределённости в самой работе. Алгоритмические сетки дают ту живую линию, о которой мечтал Вайнгарт, но главное не в этом: они меняют не количество труда дизайнера, а его род. Работа уходит из каждого макета в один закон — думать приходится дольше и раньше, зато один раз. Попутно эта же практика сильно упрощает вайб-кодинг — о нём отдельный текст: «Вайб-кодинг — Лови волну!»

The algorithmic approach changes authorship itself in the design of a layout. The designer used to compose a layout — now they compose a law that generates layouts. Judgement has not gone anywhere; it has climbed one level up: instead of the question “where does this block stand,” what is resolved is “by what rule do the blocks find their places.” And that is the main thing.

Алгоритмический подход меняет само авторство в дизайне макета. Раньше дизайнер сочинял макет — теперь сочиняет закон, порождающий макеты. Суждение никуда не делось, оно поднялось на уровень выше: вместо вопроса «где стоит этот блок» решается вопрос «по какому правилу блоки находят свои места». И это главное.

A classical grid remembered where things stand. An algorithmic one remembers how to find out.
— Therein lies the main difference between the old and the new. The printed and the digital.

Классическая сетка помнила, где стоят вещи. Алгоритмическая помнит, как это узнать.
— В этом главное отличие старого и нового. Печатного и цифрового.