Как определить колонки GRID таблицы по аналогии TABLE?

Softlink,
Ответ:

main{    display: grid;
    rid-template-columns: [start] 1fr [line1] auto [line2] auto [line3];
}
.name{    /*Колонка постоянная*/
    grid-column: start / line1;
}
.count{    /* Колонка Опциональная*/
    grid-column: line1 / line2;
}
.summ{    /*Колонка Опциональная*/
    grid-column: line2 / line3;
}
.tax{    /*Блок во всю ширину всех колонок, как COLSPAN (с любым количеством колонок)*/ 
    grid-column: start / line3;
}

Спасибо за помощь!
Большой трудностью было сделать блок в последней колонке как ROWSPAN, мне так и не удалось. Я не нашел как именовать последнюю линию под последним рядом. Но зато сделал аналогию COLSPAN.
В добавок к этому решению не возможно сделать GAP. При указании GAP сразу видно все отсутствующие колонки, потому что у пустых колонок появляется дополнительный отступ.
Но это я думаю НЕ проблема
Кстати, в описании вопроса можно было решить это через AREA:

main{    display:grid;
    grid-template-columns: 1fr auto  auto auto;
    grid-template-areas: "name count cost summ";
}

Очень странно, ведь с AREAS блоки накладываются. а с линиями они выстраиваются как в <table>
Еще попытка сделать блок наподобие ROWSPAN:

.rowspan{
    grid-column: line4 / line5;
    grid-row: 1 / 100; 
}

https://jsfiddle.net/KoreshS/qutmv39k/4/

Как определить колонки GRID таблицы по аналогии TABLE?

Softlink, В отсутствии описания условия на количество колонок, моя огромная ошибка. Но отсутствие условия на количество строк, извените уж, это было ясно из контекста. В общем Ваш ответ не сказался на строки.
А действительно нет решения как в <TABLE >?
Может по линиям писать GRID, условно что мол первая колонка будет от первой линии до второй. Следующая колонка будет от 2 до 3 линии. Правда вот не знаю будут ли накладывается тут блоки.

Какую ОС ставить на домашний хостинг?

https://pingvinus.ru/distribution/4mlinux
4MLinux
Основные компоненты 4MLinux можно разделить на 4 категории, названия которых начинаются на букву M, отсюда и название дистрибутива.

1. Maintenance — может использоваться как аварийный LiveCD для восстановления систем.
   
2. Multimedia — встроенная поддержка большого количество мультимедийных форматов — видео, аудио и изображений.
   
3. Miniserver — быстрый LAMP-сервер (Linux, Apache, MariaDB, PHP). Поддержка DNS, FTP, HTTP, MySQL, NFS, Proxy, SMTP, SSH, и Telnet,
   
4. Mystery — коллекция небольших классических Linux игр.
   

Как определить колонки GRID таблицы по аналогии TABLE?

Поймите правильно.
1.Заранее не известно сколько строк будет.
2.Заранее не известно сколько будет колонок.
.
Условно в верстке будет третья колонка количества <div class='count'>3</div>. Но заранее не известно будет ли эта колонка или не будет.
Например в HTML мы на сервере либо генерируем третью колонку <td class='count'>3</td> либо не генерируем. Но при этом таблица растягивается с учетом третьей колонки либо без учета. Но растягивается.
Я хочу показать вертску так чтобы ширина столбцов автоматически располагалась во всю ширину, даже если 2 колонки или 3 будет
А зачем Вы мне написали стиль grid-template-rows: repeat(2, 1fr);, если в примере четко видно что там перечисление, и четко написано 3 точки.

Как узнать на каком скрытом HTML элементе установился фокус?

nowm, Мне было все равно. Я искал это в Firefox.
Я не могу кликнуть правой кнопкой мышки, потому что элемент скрыт. Элемент в фокусе скрыт.

Как узнать на каком скрытом HTML элементе установился фокус?

Спасибо огромное, отличное решение.
Воспользуюсь, постоянно так делать буду.
Жалко что в дереве ДОМ не понятно где оно находится, с координатами. В смысле нужно будет при каждом скрытом переходе, тыкать мышкой в консоль, искать вложенность и позиции отдельно.
Если бы панель Elements сама бы разворачивалась бы автоматом. Удивительно то что как разработчики Google до этого не додумались. Ведь теперь кажется что это очевидно и само-собой разумеется что эта функция должна быть.

Как узнать на каком скрытом HTML элементе установился фокус?

Если я это напишу в консоли, то в этот момент фокус уже слетит.
Как это увидеть в панелях каких нибудь?

Как на CSS отключить ссылку от обхода TAB?

Это больше похоже на JS.
А CSS ни как?

Как в Фотошоп обернуть(деформировать) картинку вокруг стакана?

Froggyweb, Спасибо, очень познавательно. Но там ни одна трансформация не решает проблему. Я перед заданием вопроса тут, как раз использовал возможные варианты трансформации.
Я же в тексте описал что при трансформации по Вашей методике получаются волны в рисунке.

Как в Фотошоп обернуть(деформировать) картинку вокруг стакана?

Я как раз шифт и использую, но получаются волны.
Просто волны по вертикали одинаковые.
Т.е. если разместить картинку в виде снежинки (12 линий пересекаются в центре) и растягивать с шифтом, то волны получаются одинаковыми по всей линии захвата шифтом.
.
В макетах нет этой трансформации.

Как правильней в JS писать undefined или "undefined" проверку?

Андрей Шевкалюк, Вы абсолютно правы. Разница есть.
НО! если учесть то что код пишется в формате "use strict".
А формат "use strict" подразумевает обязательное объявление переменных. То проверка typeof в кода в формате "use strict" становится полностью эквивалентной проверки (varName === udnefined).
Как мне ниже объяснил Robur, что проверка typeof имеет смысл только для старых браузеров или для старого кода в где раньше писали проверки только через двойное равно.

Как правильней в JS писать undefined или "undefined" проверку?

Robur, Спасибо огромное.
Ни разу не попадалось описание в сети в чем различие проверок.
Пишу скрипт, теперь после Вашего разъяснения буду скрипт чистить от кавычек и typeof. потому что я везде делал двойную проверку.

Как правильней в JS писать undefined или "undefined" проверку?

Андрей Шевкалюк, typeof varName === 'undefined'
и
varName === undefined
это и есть тоже самое????
мне нужно сделать проверка ну undefined, null и false.
Но вопрос мне обязательно писать в массиве 'undefined' с ковычками?
или с ковычками нужно писать там где написано typeof?
По сути нужна проверка

typeof varName === 'undefined' || varName === undefined || varName === 0  || varName === false  || varName === ''

Интересует то что является ли тут избыточной проверкой typeof varName === 'undefined' а если является то удобней писать конечно [...].includes(VarName)

Как правильней в JS писать undefined или "undefined" проверку?

По сути нужна проверка

typeof varName === 'undefined' || varName === undefined || varName === 0  || varName === false  || varName === ''

Интересует то что является ли тут избыточной проверкой typeof varName === 'undefined' а если является то удобней писать конечно [...].includes(VarName)

Как правильней в JS писать undefined или "undefined" проверку?

typeof varName === 'undefined'
и
varName === undefined
это и есть тоже самое????
мне нужно сделать проверка ну undefined, null и false.
Но вопрос мне обязательно писать в массиве 'undefined' с ковычками?
или с ковычками нужно писать там где написано typeof?

Как правильней в JS писать undefined или "undefined" проверку?

typeof varName === 'undefined'
и
varName === undefined
это и есть одно и тоже самое????

Почему рекапча выдает ошибку - неверный ключ?

А наоборот подойдет ключ, например от версии 3 к 2.

Как к HTML элементу добавить функцию?

Я хочу написать расширение(модуль) на JS.
Кажется получилось:

HTMLElement.prototype.binder = function(){console.log('Ha Ha Ha!!!',this);};

Я могу вызвать:
document.getElementById('mfForm_319').binder();
Спасибо Вы мне помогли осознать прототипирование.

Как к HTML элементу добавить функцию?

Мне нужно ко всем элементам HTMLэлементам добавить функцию. Вы предлагаете мне все теги так перебирать?
или все таки можно к базовому объекту добавить прототип фунции?

Как на JS создать форматирование строки для объекта?

Денис Инешин, но в JQ уже есть Bind, On, Trigger,.
Я же написал не просто события, а привязку к тегам.
.
Привязка по контексту.
Я вспоминаю как в C# WPF пользовался привязкой к интерфейсу по контексту. В котором обект привязывается к форме, а отдельные контролы автоматом привязываются к свойствам объекта.
Это не то чтобы события, это контекстная работа с интерфейсом.