{"id":133505,"date":"2025-02-02T15:15:58","date_gmt":"2025-02-02T09:15:58","guid":{"rendered":"http:\/\/rcl-radio.ru\/?p=133505"},"modified":"2025-02-02T15:15:58","modified_gmt":"2025-02-02T09:15:58","slug":"grid-layout-%d0%b2-css-%d0%bc%d0%be%d1%89%d0%bd%d1%8b%d0%b9-%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%bc%d0%b5%d0%bd%d1%82-%d0%b4%d0%bb%d1%8f-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d1%8f-%d1%81","status":"publish","type":"post","link":"http:\/\/rcl-radio.ru\/?p=133505","title":{"rendered":"Grid Layout \u0432 CSS: \u041c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432"},"content":{"rendered":"<div class=\"sc-lllmON sc-bYMpWt iZGdFS iMrIfp sc-kMjNwy elKxmT\">\n<div class=\"sc-gikAfH hUQNGy\">\n<p class=\"sc-jmpzUR cfetIB\"><strong class=\"sc-fmZqYP yjslu\"><span class=\"sc-EJAja gTUZZW\">CSS Grid Layout<\/span><\/strong><span class=\"sc-EJAja gTUZZW\">\u00a0\u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c CSS, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u0441\u0435\u0442\u043e\u0447\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Flexbox, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438 (\u043b\u0438\u0431\u043e \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0435, \u043b\u0438\u0431\u043e \u043f\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0435), Grid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0433\u0438\u0431\u043a\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432.<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"sc-lllmON sc-bYMpWt iZGdFS loGFNg sc-eeMvmM ekfQTj\">\n<div class=\"sc-gikAfH hUQNGy\">\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Grid Layout<\/span><\/strong><\/p>\n<ol class=\"sc-fIhvWL dnYNgD\" start=\"1\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 Grid<\/strong>: \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<code class=\"sc-iveFHk dlEjPr\">display: grid<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435\u00a0<em class=\"sc-lknQiW awdbB\">\u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/em>\u00a0(<em class=\"sc-lknQiW awdbB\">grid items<\/em>).<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">\u041b\u0438\u043d\u0438\u0438 \u0441\u0435\u0442\u043a\u0438<\/strong>: \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438, \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u0435\u0442\u043a\u0443. \u042d\u0442\u0438 \u043b\u0438\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044f\u0447\u0435\u0435\u043a.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">\u0422\u0440\u0435\u043a\u0438<\/strong>: \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u0441\u0435\u0442\u043a\u0438. \u041c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0438\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">\u042f\u0447\u0435\u0439\u043a\u0430<\/strong>: \u041e\u0431\u043b\u0430\u0441\u0442\u044c, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u0430\u044f \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u0441\u0435\u0442\u043a\u0438 (\u0434\u0432\u0443\u043c\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0434\u0432\u0443\u043c\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438).<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\">\u041e\u0431\u043b\u0430\u0441\u0442\u0438<\/strong>: \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043c\u0435\u0436\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u043d\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<\/span><\/li>\n<\/ol>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 Grid<\/span><\/strong><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">1.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">display<\/code><\/span><\/strong><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">display: grid;<\/code><\/strong>: \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u043a \u0441\u0435\u0442\u043a\u0443.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">display: inline-grid;<\/code><\/strong>: \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438\u00a0<code class=\"sc-iveFHk dlEjPr\">grid<\/code>, \u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">2.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-template-columns<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-template-rows<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u0434\u0430\u044e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0441\u0442\u0440\u043e\u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-template-columns: 100px 50% 150px;<\/code><\/strong>: \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, 50% \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 150 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-template-rows: repeat(3, 1fr);<\/code><\/strong>: \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0432\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0439\u043c\u0435\u0442 \u043e\u0434\u043d\u0443 \u0434\u043e\u043b\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 (<code class=\"sc-iveFHk dlEjPr\">1fr<\/code>).<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">3.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-template-areas<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c \u0441\u0435\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043b\u0435\u0433\u0447\u0435 \u0431\u044b\u043b\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/span><\/p>\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-css\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-css\"><span class=\"token selector\">.container<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> grid<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">grid-template-areas<\/span><span class=\"token punctuation\">:<\/span>\r\n        <span class=\"token string\">\"header header\"<\/span>\r\n        <span class=\"token string\">\"sidebar content\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0417\u0434\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0442\u043a\u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u0433\u0434\u0435 \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043d\u044f\u0442\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">header<\/code><\/span><span class=\"sc-EJAja gTUZZW\">), \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">sidebar<\/code><\/span><span class=\"sc-EJAja gTUZZW\">) \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">content<\/code><\/span><span class=\"sc-EJAja gTUZZW\">).<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">4.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-auto-flow<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0445 \u044f\u0447\u0435\u0435\u043a \u0441\u0435\u0442\u043a\u0438:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-auto-flow: row;<\/code><\/strong>: \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-auto-flow: column;<\/code><\/strong>: \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">5.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-gap<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\/\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">gap<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0435\u043a\u0430\u043c\u0438 \u0441\u0435\u0442\u043a\u0438:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-gap: 10px;<\/code><\/strong>: \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0435\u043a\u0430\u043c\u0438.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">gap: 15px;<\/code><\/strong>: \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438\u00a0<code class=\"sc-iveFHk dlEjPr\">grid-gap<\/code>, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">6.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">justify-items<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">align-items<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u044f\u0447\u0435\u0435\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u044f\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">justify-items: start;<\/code><\/strong>: \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044f\u0447\u0435\u0435\u043a \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">align-items: end;<\/code><\/strong>: \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044f\u0447\u0435\u0435\u043a \u043f\u043e \u043d\u0438\u0436\u043d\u0435\u043c\u0443 \u043a\u0440\u0430\u044e.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">7.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">justify-content<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">align-content<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0439 \u0441\u0435\u0442\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">justify-content: center;<\/code><\/strong>: \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0442\u043a\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">align-content: space-between;<\/code><\/strong>: \u0420\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0435\u0442\u043a\u0438<\/span><\/strong><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">1.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-area<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0435\u0442\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/span><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<pre class=\"sc-iAEawV jJcDgg line-numbers language-css\" tabindex=\"0\"><code class=\"sc-cabOPr cVdCvb language-css\"><span class=\"token selector\">.item<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">grid-area<\/span><span class=\"token punctuation\">:<\/span> sidebar<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0417\u0434\u0435\u0441\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">item<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">sidebar<\/code><\/span><span class=\"sc-EJAja gTUZZW\">, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u043d\u0435\u0435 \u0447\u0435\u0440\u0435\u0437\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-template-areas<\/code><\/span><span class=\"sc-EJAja gTUZZW\">.<\/span><\/p>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">2.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-column<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-row<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0430:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-column: 1 \/ 3;<\/code><\/strong>: \u042f\u0447\u0435\u0439\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e \u0442\u0440\u0435\u0442\u044c\u044e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-row: 2 \/ span 2;<\/code><\/strong>: \u042f\u0447\u0435\u0439\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">3.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-column-start<\/code><\/span><span class=\"sc-EJAja gTUZZW\">,\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-column-end<\/code><\/span><span class=\"sc-EJAja gTUZZW\">,\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-row-start<\/code><\/span><span class=\"sc-EJAja gTUZZW\">,\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">grid-row-end<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u044f\u0447\u0435\u0439\u043a\u0430:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-column-start: 1; grid-column-end: 3;<\/code><\/strong>: \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u00a0<code class=\"sc-iveFHk dlEjPr\">grid-column: 1 \/ 3;<\/code>.<\/span><\/li>\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">grid-row-start: 2; grid-row-end: 4;<\/code><\/strong>: \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u00a0<code class=\"sc-iveFHk dlEjPr\">grid-row: 2 \/ 4;<\/code>.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">4.\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">place-self<\/code><\/span><\/strong><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u042d\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">align-self<\/code><\/span><span class=\"sc-EJAja gTUZZW\">\u00a0\u0438\u00a0<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">justify-self<\/code><\/span><span class=\"sc-EJAja gTUZZW\">:<\/span><\/p>\n<ul class=\"sc-fWHiwC kTRKBp\">\n<li class=\"sc-gzrROc kAlRMd\"><span class=\"sc-EJAja gTUZZW\"><strong class=\"sc-fmZqYP yjslu\"><code class=\"sc-iveFHk dlEjPr\">place-self: center;<\/code><\/strong>: \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/span><\/li>\n<\/ul>\n<p class=\"sc-eDZJfc dNqjyD\"><strong><span class=\"sc-EJAja gTUZZW\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Grid Layout<\/span><\/strong><\/p>\n<div class=\"sc-iTFTee dOrRfG\">\n<p><a href=\"http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43.png\" class=\"highslide-image\" onclick=\"return hs.expand(this);\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-133506\" src=\"http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43.png\" alt=\"\" width=\"1314\" height=\"656\" srcset=\"http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43.png 1314w, http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43-500x250.png 500w, http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43-1024x511.png 1024w, http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43-200x100.png 200w, http:\/\/rcl-radio.ru\/wp-content\/uploads\/2025\/02\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2025-02-02-15-14-43-768x383.png 768w\" sizes=\"auto, (max-width: 1314px) 100vw, 1314px\" \/><\/a><\/p>\n<\/div>\n<pre><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">!<\/span><span style=\"color: #000000;\">DOCTYPE<\/span> <span style=\"color: #000000;\">html<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #000000;\">html<\/span> <span style=\"color: #000000;\">lang<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"en\"<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #000000;\">head<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #000000;\">meta<\/span> <span style=\"color: #000000;\">charset<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"UTF-8\"<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #000000;\">title<\/span><span style=\"color: #434f54;\">&gt;<\/span><span style=\"color: #000000;\">Grid<\/span> <span style=\"color: #000000;\">Layout<\/span> <span style=\"color: #000000;\">Example<\/span><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #000000;\">title<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">style<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">.<\/span><span style=\"color: #000000;\">container<\/span> <span style=\"color: #000000;\">{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #d35400;\">display<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">grid<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #5e6d03;\">template<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">columns<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">repeat<\/span><span style=\"color: #000000;\">(<\/span><span style=\"color: #000000;\">3<\/span><span style=\"color: #434f54;\">,<\/span> <span style=\"color: #000000;\">1fr<\/span><span style=\"color: #000000;\">)<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #5e6d03;\">template<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #d35400;\">rows<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">100px<\/span> <span style=\"color: #000000;\">300px<\/span> <span style=\"color: #000000;\">100px<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">gap<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">10px<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">height<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">100vh<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">.<\/span><span style=\"color: #000000;\">header<\/span> <span style=\"color: #000000;\">{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">column<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">1<\/span> <span style=\"color: #434f54;\">\/<\/span> <span style=\"color: #000000;\">4<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #d35400;\">background<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #d35400;\">color<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">lightblue<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">.<\/span><span style=\"color: #000000;\">sidebar<\/span> <span style=\"color: #000000;\">{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">row<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">2<\/span> <span style=\"color: #434f54;\">\/<\/span> <span style=\"color: #000000;\">4<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #d35400;\">background<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #d35400;\">color<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">lightcoral<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">.<\/span><span style=\"color: #000000;\">content<\/span> <span style=\"color: #000000;\">{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">column<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">2<\/span> <span style=\"color: #434f54;\">\/<\/span> <span style=\"color: #000000;\">4<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">row<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">2<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #d35400;\">background<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #d35400;\">color<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">lightgreen<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">.<\/span><span style=\"color: #000000;\">footer<\/span> <span style=\"color: #000000;\">{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">grid<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #000000;\">column<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">1<\/span> <span style=\"color: #434f54;\">\/<\/span> <span style=\"color: #000000;\">4<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #d35400;\">background<\/span><span style=\"color: #434f54;\">-<\/span><span style=\"color: #d35400;\">color<\/span><span style=\"color: #434f54;\">:<\/span> <span style=\"color: #000000;\">lightgray<\/span><span style=\"color: #000000;\">;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #000000;\">}<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">style<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #000000;\">head<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #000000;\">body<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">div<\/span> <span style=\"color: #00979c;\">class<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"container\"<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">div<\/span> <span style=\"color: #00979c;\">class<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"header\"<\/span><span style=\"color: #434f54;\">&gt;<\/span><span style=\"color: #000000;\">Header<\/span><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">div<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">div<\/span> <span style=\"color: #00979c;\">class<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"sidebar\"<\/span><span style=\"color: #434f54;\">&gt;<\/span><span style=\"color: #000000;\">Sidebar<\/span><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">div<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">div<\/span> <span style=\"color: #00979c;\">class<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"content\"<\/span><span style=\"color: #434f54;\">&gt;<\/span><span style=\"color: #000000;\">Content<\/span><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">div<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #d35400;\">div<\/span> <span style=\"color: #00979c;\">class<\/span><span style=\"color: #434f54;\">=<\/span><span style=\"color: #005c5f;\">\"footer\"<\/span><span style=\"color: #434f54;\">&gt;<\/span><span style=\"color: #000000;\">Footer<\/span><span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">div<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n \u00a0\u00a0\u00a0<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #d35400;\">div<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #000000;\">body<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<span style=\"color: #434f54;\">&lt;<\/span><span style=\"color: #434f54;\">\/<\/span><span style=\"color: #000000;\">html<\/span><span style=\"color: #434f54;\">&gt;<\/span>\r\n<\/pre>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0442\u043a\u0430 \u0441 \u0442\u0440\u0435\u043c\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u0438 \u0442\u0440\u0435\u043c\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">header<\/code><\/span><span class=\"sc-EJAja gTUZZW\">) \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">sidebar<\/code><\/span><span class=\"sc-EJAja gTUZZW\">) \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0438 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u0440\u044f\u0434\u0443, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">content<\/code><\/span><span class=\"sc-EJAja gTUZZW\">) \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0440\u044f\u0434\u0443, \u0430 \u043d\u0438\u0436\u043d\u0438\u0439 \u043a\u043e\u043b\u043e\u043d\u0442\u0438\u0442\u0443\u043b (<\/span><span class=\"sc-EJAja gTUZZW\"><code class=\"sc-iveFHk dlEjPr\">footer<\/code><\/span><span class=\"sc-EJAja gTUZZW\">) \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/span><\/p>\n<p class=\"sc-jmpzUR cfetIB\"><span class=\"sc-EJAja gTUZZW\">CSS Grid Layout \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0449\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0433\u0438\u0431\u043a\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c, \u0442\u0430\u043a \u0438 \u043f\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS Grid Layout\u00a0\u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c CSS, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u0441\u0435\u0442\u043e\u0447\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Flexbox, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438 (\u043b\u0438\u0431\u043e \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0435, \u043b\u0438\u0431\u043e \u043f\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0435), Grid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0433\u0438\u0431\u043a\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Grid Layout \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 Grid: \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":133506,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[463],"tags":[],"class_list":["post-133505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"views":1118,"_links":{"self":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133505"}],"version-history":[{"count":1,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133505\/revisions"}],"predecessor-version":[{"id":133507,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133505\/revisions\/133507"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/media\/133506"}],"wp:attachment":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133505"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}