Сергей delphinpro

* {
  outline : 1px solid red !important;
}

Сделайте его блочным



Здесь это делается по условию. Если в теге много символов, или более одной строки – он оборачивается в блочный pre

да хоть сто. ларавел не имеет отношения к css

Даже не знаю, что здесь может не получиться...

prewordeSSS, вы от балды пробуете разные варианты? =))

col-xl-* – это для больших экранов.
Когда вы масштабируте страницу, логическое разрешение у нее уменьшается, вплоть до мобильного представления. Если вам, вне зависимости от размера вьюпорта необходимо выводить четыре колонки, то так и пишите col-3
Но лучше, все-таки на мобильниках выводить в одну колонку, на планшетах, например в две, дальше уже четыре.
Как-то так, примерно
class="col-12 col-sm-6 col-md-3"

Убрать высоту, добавить внутренние отступы.

Кроме самых основ:
React - Vue - Angular, в порядке востребованности.
Typescript уже по умолчанию идет в них.
Webpack/Vite тоже по дефолту.
Разумеется, предполагается хорошее знание нативного javascript.
Узкопрофильные API джаваскрипта, webgl, assembly и т.п. можно пока опустить, может и не понадобятся.
Препроцессинг для css. Тут лидирует Scss.
Ну jquery хорошо бы знать, если придется ковырять легаси. Много где используется.

https://qna.habr.com/q/889235
https://qna.habr.com/q/515932
https://qna.habr.com/q/440823
https://qna.habr.com/q/519851
https://qna.habr.com/q/458710

Как скачать?

Там же, в гугл шрифтах



В архиве будут все начертания и подтипы шрифта в ttf или otf формате (для компьютера).

Далее идёте на уже упомянутый transfonter и конвертируете нужные начертания в woff/woff2 форматы, скачиваете полученный пак и подключаете (внутри будет подготовленный css файл для подключения).

Grid - это сетка. фиксированная. за пределы ячеек выйти нельзя
Flex - это гибкая раскладка, что следует из названия. Элементы могут быть и бывают гибкими, подстраиваться под какие-то факторы.

Главное: не нужно зацикливаться на чем-то одном. Это НЕ взаимоисключающие технологии. В зависимости от требований используйте то, что лучше подходит.

https://developer.mozilla.org/ru/docs/Web/CSS/:has
https://caniuse.com/css-has

Наверное так

.wui-select-container:has(input:disabled)::after {

}

.replace(/\D/, '')

1. Нужно изменить либо формулы, либо бокс-модель. Второе проще box-sizing: border-box;
2. У вас три колонки, а значит два промежутка по 30px: width: calc((100% - 30px * 2) / 3);
3. В жопу марджины. Для указания промежутков есть специальное свойство gap: 20px 30px;

Итог:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.item {
  box-sizing: border-box;
  width: calc((100% - 30px * 2) / 3);
  text-decoration: none;
  color: #000;
  padding: 20px;
  border: 1px solid #000;
}

const select = document.querySelector('select');// Берем первый селект на странице
select.addEventListener('change', () => {
  switch (select.value) {
    case 1:
      select.style.border = '1px solid red';
      break;
    case 2:
      select.style.border = '1px solid green';
      break;
    case 3:
      select.style.border = '1px solid blue';
      break;
  }
})

Обрабатываем все селекты

document.querySelectorAll('select').forEach(select => {
  select.addEventListener('change', () => {
    switch (select.value) {
      case 1:
        select.style.border = '1px solid red';
        break;
      case 2:
        select.style.border = '1px solid green';
        break;
      case 3:
        select.style.border = '1px solid blue';
        break;
    }
  })
})