{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8vsr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При вёрстке сайта, одной из первых задач верстальщика является создание основного шаблона. Основным шаблоном в данном случае называется вёрстка без контента - это совокупность шапки сайта, меню, футера и прочих элементов, которые встречаются на каждой странице.","type":"unstyled","key":"e3ld9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, попробуем сверстать простой макет сайта. Сверху у нас будет шапка сайта, слева будет навигация по разделу сайта, справа контент, а снизу футер. Стандартный шаблон, ничего необычного. Начнём с HTML.","type":"unstyled","key":"430kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Header

\n \n

Site content

\n \n

","type":"blockquote","key":"e9hhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Если мы запустим это прямо сейчас, мы лишь увидим, как все эти элементы расположились друг под другом. Придётся добавить стилей. ","type":"unstyled","key":"3ec5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"53dg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Float","type":"header-three","key":"88pf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":352,"style":"ITALIC"}],"text":" В древние времена существовало несколько вариантов вёрстки макетов, а самым адекватным из них был float. Как мы выяснили в одной из предыдущих глав, с помощью float можно сделать так, чтобы картинка обтекалась текстом. То же можно применить и к блокам. Если мы возьмём два блочных элемента с определенными заранее шириной и высотой, то, добавив к ним float: left, мы увидим, как эти два блочных элемента выстроятся в один ряд, если ширина страницы это позволит. ","type":"unstyled","key":"3colc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"etgho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":164,"style":"BOLD"},{"length":12,"offset":217,"style":"BOLD"},{"length":12,"offset":311,"style":"BOLD"},{"length":12,"offset":357,"style":"BOLD"},{"length":13,"offset":413,"style":"BOLD"}],"text":".main-container {\n margin: 0 auto;\n max-width: 800px;\n}\nheader {\n height: 50px;\n background: cornflowerblue;\n}\nnav {\n height: 80px;\n background: darksalmon;\n width: 20%; /* Задаём ширину блока навигации */\n float: left; /* Устанавливаем обтекание */ \n}\nmain {\n height: 120px;\n background: khaki;\n width: 80%; /* Задаём ширину контента */\n float: left; /* Устанавливаем обтекание */\n}\nfooter {\n clear: both; /* Сбрасываем обтекание */\n height: 50px;\n background: darkseagreen;\n}","type":"blockquote","key":"9dqge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fp7oa"},{"data":{"image":{"id":"5d7d2f5697b5d400af9741f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a0kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5n5pq"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":40,"offset":48}],"inlineStyleRanges":[],"text":"Взглянуть на полученный результат можно здесь: \nhttps://codepen.io/artik-man/pen/GRKBqye ","type":"unstyled","key":"1mmlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Казалось бы, на этом можно закончить наш урок, но, если хорошо подумать, можно увидеть, как много проблем мы породили этим решением:","type":"unstyled","key":"7at5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы не можем жёстко зафиксировать ширину навигационного меню","type":"unordered-list-item","key":"9utbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":131,"style":"ITALIC"}],"text":"Если перед футером нам потребуется вставить какой-то блок, например, рекламный, вёрстка \"поедет\", ведь мы благополучно забудем про clear: both;","type":"unordered-list-item","key":"5krm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Высота навигации никак не зависит от высоты контента и наоборот. Под более коротким блоком будет пустота.","type":"unordered-list-item","key":"7vahb"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":5,"offset":31}],"inlineStyleRanges":[],"text":"Подробнее о float читайте тут: float","type":"unstyled","key":"507u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2588r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"8to7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Flex","type":"header-three","key":"a748i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":59,"style":"ITALIC"},{"length":15,"offset":75,"style":"ITALIC"}],"text":"Рассмотрим более современный способ. Мы можем использовать display:flex; у .main-container, тогда мы сможем избавиться от пары недостатков предыдущего примера.","type":"unstyled","key":"5eeee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":58,"style":"BOLD"},{"length":21,"offset":116,"style":"BOLD"},{"length":17,"offset":219,"style":"BOLD"},{"length":12,"offset":322,"style":"BOLD"},{"length":11,"offset":468,"style":"BOLD"},{"length":12,"offset":579,"style":"BOLD"},{"length":12,"offset":643,"style":"BOLD"}],"text":".main-container {\n margin: 0 auto;\n max-width: 800px;\n display: flex; /* Объявляем контейнер флексом */\n align-items: stretch; /* Высота элементов должна подстраиваться по высоте самого высокого элемента */\n flex-wrap: wrap; /* Если не хватает места в строке, переносить блок на следующую */\n}\nheader {\n width: 100%; /* Обязательно задаём ширину для шапки */\n height: 50px;\n background: cornflowerblue;\n}\nnav {\n background: darksalmon;\n width: 20%; /* Задаём ширину навигационного меню */\n}\nmain {\n height: 120px;\n background: khaki;\n width: 80%; /* Задаём ширину контента */\n}\nfooter {\n width: 100%; /* Обязательно задаём ширину для футера */\n height: 50px;\n background: darkseagreen;\n}","type":"blockquote","key":"8arpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"a0p32"},{"data":{"image":{"id":"5d7d2fb4f73d9d00c30371d7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7ol33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6bmll"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":40,"offset":41}],"inlineStyleRanges":[],"text":"Получившийся результат посмотрите тут: \n https://codepen.io/artik-man/pen/LYPBZdm ","type":"unstyled","key":"69ksv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как мы видим, каким бы длинным ни был контент, под навигацией не образуется пробела, а так как больше нет флоатов, то перед футером можно вставить любой блок.К сожалению, таким способом мы не смогли решить последнюю проблему: как задать у меню фиксированную ширину, а ширина контента при этом была переменной?","type":"unstyled","key":"dnun6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Больше о flex здесь:","type":"unstyled","key":"1fnb6"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":24,"offset":0}],"inlineStyleRanges":[],"text":"Основные понятия Flexbox","type":"unordered-list-item","key":"em113"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":9,"offset":0}],"inlineStyleRanges":[],"text":"flex-wrap","type":"unordered-list-item","key":"cv3tm"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":31,"offset":0}],"inlineStyleRanges":[],"text":"align-items and justify-content","type":"unordered-list-item","key":"7kc10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"buik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Grid","type":"header-three","key":"4sro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":77,"style":"ITALIC"}],"text":"Самым современным способом вёрстки макетов на сегодняшний день является т.н. Grid layout. Грид позволяет выстраивать элементы внутри себя по заранее заданной сетке. Для начала разберём пример, а затем разберёмся подробнее, как это работает.","type":"unstyled","key":"49g4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":58,"style":"BOLD"},{"length":34,"offset":131,"style":"BOLD"},{"length":33,"offset":194,"style":"BOLD"},{"length":164,"offset":257,"style":"BOLD"},{"length":18,"offset":462,"style":"BOLD"},{"length":16,"offset":596,"style":"BOLD"},{"length":19,"offset":700,"style":"BOLD"},{"length":19,"offset":763,"style":"BOLD"},{"length":23,"offset":421,"style":"ITALIC"}],"text":".main-container {\n margin: 0 auto;\n max-width: 800px;\n display: grid; /* Объявляем контейнер гридом */\n grid-template-rows: 50px 1fr 50px; /* (1) Задаём строки*/\n grid-template-columns: 200px 1fr; /* (2) Задаём колонки*/\n grid-template-areas: 'header header' \n 'nav content' \n 'footer footer'; /* (3) Задаём области*/\n}\n header {\n grid-area: header; /* Шапка займёт область с названием header */\n background: cornflowerblue;\n}\nnav {\n background: darksalmon;\n grid-area: nav; /* Навигация займет область nav */\n}\nmain {\n height: 120px;\n background: khaki;\n grid-area: content; /* Контент займёт content */\n}\nfooter {\n grid-area: footer; /* Футер - footer */\n background: darkseagreen;\n}","type":"blockquote","key":"9rbrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"9ni7c"},{"data":{"image":{"id":"5d7d30731e8e3f00ad9bf265"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1ffnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fp7a0"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":40,"offset":16}],"inlineStyleRanges":[],"text":"Результат тут: \nhttps://codepen.io/artik-man/pen/KKPBMRz ","type":"unstyled","key":"fb2sh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7qg89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как можно заметить, мы избавились от всех негативных последствий. А теперь разберёмся подробнее, как это работает.","type":"unstyled","key":"88a67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":"grid-template-rows: 50px 1fr 50px означает, что если смотреть на сайт по вертикали, то у нас образуются три строки: шапка, навигация с контентом, футер. Высоту первой строки, шапки, установим равной 50px, высота второй строки нам неизвестна, а высота третьей, футера, тоже 50px.","type":"unordered-list-item","key":"eijem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":"grid-template-columns: 200px 1fr означает, что если смотреть на сайт по горизонтали, то образуются два столбца: слева навигация, справа контент. Ширину навигации установим равной 200px, а ширина контента нам неизвестна и она займёт всё доступное пространство.","type":"unordered-list-item","key":"67o13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":97,"style":"ITALIC"},{"length":9,"offset":350,"style":"ITALIC"}],"text":"Итак, на этом этапе мы поняли, что у нас будет три строки и два столбца. Это и указываем далее: \ngrid-template-areas: \n 'header header' \n 'nav content' \n 'footer footer'.\nЭтот код создаёт три строки и два столбца, состоящие из именованных областей. Именовать эти области можно как угодно, их названия будут указаны в дочерних элементах в свойстве grid-area. Здесь мы видим, что шапка займёт две колонки; навигация - одну, левую колонку; контент - одну правую; футер - две колонки.","type":"unordered-list-item","key":"dp2ib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, мы получили идеальную сетку для нашего сайта. Подробнее о grid layout читать здесь:","type":"unstyled","key":"ejpks"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":15,"offset":0}],"inlineStyleRanges":[],"text":"CSS Grid layout","type":"unordered-list-item","key":"a934p"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":13,"offset":0}],"inlineStyleRanges":[],"text":"grid-template","type":"unordered-list-item","key":"d74sb"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":9,"offset":0}],"inlineStyleRanges":[],"text":"grid-area","type":"unordered-list-item","key":"d668d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Calc","type":"header-three","key":"3glta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь настало время удивляться. Вернёмся к примеру с флексом и добавим еще немного CSS:","type":"unstyled","key":"528cb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nav {\n width: 200px;\n}\nmain {\n width: calc(100% - 200px);\n}","type":"blockquote","key":"8e2br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e3bkn"},{"data":{"image":{"id":"5d7d30bbec575b00b30e2145"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8ahmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2og96"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":40,"offset":12}],"inlineStyleRanges":[],"text":"Результат: https://codepen.io/artik-man/pen/mdbjELo ","type":"unstyled","key":"d0k10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6fd7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"89p6"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":29,"offset":158}],"inlineStyleRanges":[],"text":"Таким образом мы избавились от проблемы фиксированной ширины меню. Благодаря функции calc(), мы заставили ширину контента зависеть от ширины блока навигации. О calc() можно почитать здесь","type":"unstyled","key":"a9571"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё один вариант вёрстки шаблона","type":"header-three","key":"oj7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На самом деле, есть еще один вариант. Он сложный и ненадёжный, но для общего развития, стоит упомянуть и его.","type":"unstyled","key":"fvads"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":57,"style":"BOLD"},{"length":27,"offset":80,"style":"BOLD"},{"length":19,"offset":147,"style":"BOLD"},{"length":13,"offset":202,"style":"BOLD"},{"length":20,"offset":281,"style":"BOLD"},{"length":11,"offset":303,"style":"BOLD"},{"length":13,"offset":317,"style":"BOLD"},{"length":13,"offset":344,"style":"BOLD"},{"length":17,"offset":360,"style":"BOLD"},{"length":20,"offset":452,"style":"BOLD"},{"length":13,"offset":511,"style":"BOLD"}],"text":".main-container {\n margin: 0 auto;\n max-width: 800px;\n position: relative;\n padding: 50px 0 50px 200px;\n box-sizing: border-box;\n}\nheader {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: 50px;\n background: cornflowerblue;\n}\nnav {\n background: darksalmon;\n position: absolute;\n top: 50px;\n bottom: 50px;\n left: 0;\n width: 200px;\n overflow-y: auto;\n}\nmain {\n height: 120px;\n background: khaki;\n width: 100%;\n}\nfooter {\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n height: 50px;\n background: darkseagreen;\n}","type":"blockquote","key":"6qqt9"},{"data":{"image":{"id":"5d7d310035ca3100ad9a6baa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"em0as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9ip3m"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":40,"offset":19}],"inlineStyleRanges":[],"text":"Результат здесь: \n https://codepen.io/artik-man/pen/ExYpyRb ","type":"unstyled","key":"6ot63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что тут сделано?","type":"unstyled","key":"bvhsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной контейнер спозиционирован относительно, чтобы абсолютно-спозиционированные элементы выстраивались внутри него.","type":"unordered-list-item","key":"ed17m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шапка и футер прижимаются к верхней и нижней части контейнера.","type":"unordered-list-item","key":"dudh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Навигация прижимается к левой части контейнера.","type":"unordered-list-item","key":"b9k7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы блоки не налезали друг на друга, с помощью внутренних отступов у основного контейнера, отделим контент от остальных блоков.","type":"unordered-list-item","key":"8sdsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":85,"style":"ITALIC"}],"text":"Так как теперь высота блока навигации зависит от высоты контента, добавляем свойство overflow, чтобы при недостаточной высоте навигации, внутри неё появлялся скроллбар.","type":"unordered-list-item","key":"46sjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2jvjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, мы рассмотрели несколько способов вёрстки многоклоночных макетов. Каждый имеет свои достоинства и недостатки, а применять их нужно по ситуации. К примеру, макетом на grid не стоит пользоваться, если на вашем проекте подразумевается поддержка Internet Explorer 10 и старше. ","type":"unstyled","key":"7i7k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8mk74"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":42,"offset":82},{"key":14,"length":49,"offset":207}],"inlineStyleRanges":[{"length":13,"offset":67,"style":"BOLD"}],"text":"Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues","type":"unstyled","key":"999ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Vjeh7TJRZ5f2yorHj2nA"}],"entityMap":{"11":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/calc","url":"https://developer.mozilla.org/ru/docs/Web/CSS/calc"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://codepen.io/artik-man/pen/ExYpyRb","url":"https://codepen.io/artik-man/pen/ExYpyRb"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://artik-man.github.io/HTML-Practice/","url":"https://artik-man.github.io/HTML-Practice/"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://github.com/Artik-Man/HTML-Practice/issues","url":"https://github.com/Artik-Man/HTML-Practice/issues"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"href":"https://codepen.io/artik-man/pen/GRKBqye","url":"https://codepen.io/artik-man/pen/GRKBqye"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/float","url":"https://developer.mozilla.org/ru/docs/Web/CSS/float"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://codepen.io/artik-man/pen/LYPBZdm","url":"https://codepen.io/artik-man/pen/LYPBZdm"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox","url":"https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/flex-wrap","url":"https://developer.mozilla.org/ru/docs/Web/CSS/flex-wrap"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://codepen.io/artik-man/pen/KKPBMRz","url":"https://codepen.io/artik-man/pen/KKPBMRz"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout","url":"https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://codepen.io/artik-man/pen/mdbjELo","url":"https://codepen.io/artik-man/pen/mdbjELo"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}