Думая о CSS Grid, люди обычно представляют сетчатые макеты изображений и полные веб-страницы. CSS Grid – превосходная технология для раскладки статей, так как позволяет делать то, чего раньше было сложно достичь. В этом уроке я объясню, как воссоздать знаменитые макеты статей с Medium с помощью CSS Grid.
#cssgrid
https://webformyself.com/kak-vossozdat-maket-stati-s-medium-s-pomoshhyu-css-grid/

CSS Grid – одно из крупнейших улучшений в макетах, которое видел веб за долгое время. Наконец-то мы можем создавать нативные двумерные макеты в браузере. Это делает HTML короче, а CSS – надежнее. В этой статье мы хотим поделиться тем, как нам удалось реализовать в Grid CSS макет для нашего приложения, какие преимущества мы увидели и даже о том, как нам удалось реализовать поддержку IE11.
#cssgrid
https://webformyself.com/css-grid-maket-prilozheniya-v-prodakshene/

До того, как я открыл для себя CSS Grid, я часто использовал сетку Bootstrap. Сетка Bootstrap была разумным решением для многих проблем с адаптивностью, которые у меня в то время возникали. Затем я обнаружил CSS Grid. Преимущество CSS Grid над Bootstrap — это ее двумерная природа (возможность использовать строки и столбцы), а не одна строка в Bootstrap.
#bootstrap #cssgrid
https://webformyself.com/obedinenie-css-grid-s-setkoj-bootstrap/

CSS Grid в настоящее время широко поддерживается в современных браузерах, и многие люди отлично пользуются этим! Но, к сожалению, одна из самых полезных функций спецификации не работает так, как заявляется. В частности, невозможно создать «естественно адаптивную сетку» CSS, то есть сетку, которая реагирует на размер своего контейнера без использования медиазапросов. Но благодаря определенным стандартам, которые теперь доступны в некоторых браузерах, мы можем это исправить!
#cssgrid
https://webformyself.com/estestvenno-adaptivnaya-setka-css-s-pomoshhyu-minmax-i-min/

В этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools.
#cssgrid
https://webformyself.com/inspektirovanie-css-grid/

Теперь вы можете использовать Chrome DevTools для визуальной проверки CSS-сеток и их отладки.
#cssgrid
https://webformyself.com/otladka-css-grid-kak-profi/

Мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром.
#cssgrid
https://webformyself.com/css-grid-s-avtozapolneniem-i-maksimalnym-kolichestvom-stolbcov-minimalnogo-razmera/

В CSS Grid помимо явной установки размеров колонок есть еще одна из мощнейших функций – в Grid можно повторять колонки для заполнения контейнера и автоматически размещать в них элементы. В частности, мы можем указать количество столбцов в сетке, а затем браузер будет управлять адаптивностью этих колонок за нас. На маленьких экранах будет показываться меньше столбцов, а на больших – больше, так как экран позволяет вместить больше столбцов. Для этого даже не нужно писать медиа запросы.
#cssgrid
https://webformyself.com/avtomaticheskoe-izmenenie-razmera-stolbcov-v-css-grid-auto-fill-protiv-auto-fit/