Вот мы и дошли до модальной сетки или как их называют в народе — гриды. Прежде чем написать эту статью я отсмотрел около 10 часов различных курсов и видеороликов на трёх языках от самых различных преподавателей на Youtube, Coursera и Udemy. Таких как Jonas Schmedtmann или Wes Bos. Эти двое, пожалуй, топ всех преподов онлайн. И я рекомендую посмотреть их материалы, мне они очень помогли.
Возможно лучше сразу учиться у лучших :). Я постараюсь дать важные азы сетки в этой статье.
grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
display: grid; grid-template-columns: 1fr 1fr; grid-template-columns: repeat(3, 1fr);
auto rows grid-auto-flow https://i.imgur.com/KI0F3LZ.jpg
https://i.imgur.com/KI0F3LZ.jpg https://i.imgur.com/avGsA02.jpg https://i.imgur.com/ZQH3lnd.jpg .item.item${$}*30 https://i.imgur.com/TJcqGYV.jpg
https://www.youtube.com/watch?v=Z3BZMd4YzVw&list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&index=3 https://www.youtube.com/watch?v=d-MHl_Q_hp8&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY&index=2 https://www.youtube.com/watch?v=jV8B24rSN5o https://www.youtube.com/watch?v=8DtkFuW1VfQ&list=PLqYFXd9GTRVWfWLkSpEXCCqAIBPUIn9a6 https://www.youtube.com/watch?v=Ufeiz6a_2xA&list=PLqYFXd9GTRVWfWLkSpEXCCqAIBPUIn9a6&index=3
Felksy #
https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-flexbox-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D1%8B%D0%B8%CC%86-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-e26662cf87e0 https://tuhub.ru/posts/flexbox-complete-guide https://tproger.ru/translations/how-css-flexbox-works/ 1:40:00 wrap 2:0:4 https://youtu.be/_gMrjQ-CdeE
https://www.youtube.com/watch?v=jV8B24rSN5o
Gridy #
- https://medium.com/flexbox-and-grids/css-grid-layout-how-to-get-started-in-2-steps-well-explained-44fab69d9274
- https://medium.com/@stasonmars/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86%D0%B0-%D0%B3%D0%B8%D0%B1%D0%BA%D0%BE%D1%81%D1%82%D0%B8-fr-%D0%B2-css-%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%BC-%D0%B8-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%8B%D0%BC-%D1%8F%D0%B7%D1%8B%D0%BA%D0%BE%D0%BC-2a3794c4444
- Крутая статья https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-grid-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%B8-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-220508316f8b
- https://webformyself.com/css-grid-vvedenie-s-primerami/
- https://tuhub.ru/posts/css-grid-complete-guide
- https://css-live.ru/articles/vyorstka-realnyx-proektov-na-gridax-css-grid-layout-uzhe-sejchas.html
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
Функция repeat() #
Вы можете использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это: grid-template-rows: 1fr 1fr 1fr 1fr 1fr; Мы можем сделать так: grid-template-rows: repeat(5, 1fr);
Поразительный CSS Grid Area #
Как работают auto-fill и auto-fit в CSS Grid #
Выравнивание по центру #
https://codepip.com/games/grid-garden/
реальные примеры #
https://www.microsoft.com/de-de/ https://www.youtube.com/watch?v=uKgn-To1C4Q
bomba реальные примеры #
https://www.youtube.com/watch?v=-qOe8lBAChE
create account #
https://www.youtube.com/watch?v=xoxJxifNWPE&list=PLillGF-Rfqba3xeEvDzIcUCxwMlGiewfV&index=2
#
https://codepen.io/bradtraversy/pen/gvMGyB https://www.youtube.com/watch?v=moBhzSC455o
muuri grid #
https://www.youtube.com/watch?v=PDG-GqmUZss https://muuri.dev/
https://css-live.ru/articles/css-grid-na-praktike-dobavlyaem-gridy-k-sushhestvuyushhemu-dizajnu.html https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout https://habr.com/ru/company/ruvds/blog/499120/
epam #
В данном модуле студентам необходимо #
Изучить основы Grid layout в CSS:
- адаптивный grid
- вложенный grid
- выравнивание
- формы
- наложение
- позиционирование
Приблизительное время прохождения модуля #
4 часов
Теория #
- https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout - 2h
- https://tuhub.ru/posts/css-grid-complete-guide - 2h
Практика #
- Вам необходимо пройти тест “CSS Grid” в RS APP > Auto Test