{"id":6374,"date":"2026-05-24T17:00:56","date_gmt":"2026-05-24T13:30:56","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6374"},"modified":"2026-05-24T17:00:56","modified_gmt":"2026-05-24T13:30:56","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%88%d8%a7%d8%ad%d8%af-fr-%d8%af%d8%b1-css-grid-layout","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%88%d8%a7%d8%ad%d8%af-fr-%d8%af%d8%b1-css-grid-layout\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0648\u0627\u062d\u062f Fr \u062f\u0631 CSS Grid Layout"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n
\n

\u0645\u0642\u062f\u0645\u0647<\/h2>\n

\u062f\u0631 CSS Grid Layout \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 fr<\/code> \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0648\u0627\u062d\u062f fr<\/code> \u0645\u062e\u0641\u0641 Fractional Unit<\/strong> \u06cc\u0627 \u00ab\u0648\u0627\u062d\u062f \u06a9\u0633\u0631\u06cc\u00bb \u0627\u0633\u062a \u0648 \u0628\u0631\u0627\u06cc \u062a\u0642\u0633\u06cc\u0645 \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u06cc\u0646 \u0633\u062a\u0648\u0646\u200c\u0647\u0627 \u0648 \u0631\u062f\u06cc\u0641\u200c\u0647\u0627\u06cc Grid \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
1fr<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u06cc\u0639\u0646\u06cc \u06cc\u06a9 \u0633\u0647\u0645 \u0627\u0632 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f.<\/p>\n
\n
\u0645\u062b\u0627\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 fr<\/h1>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
.container<\/span> {\r\n  display: grid<\/span>;\r\n\r\n  grid-template-columns: 1<\/span>fr<\/span> 1<\/span>fr<\/span> 1<\/span>fr<\/span> 1<\/span>fr<\/span>;\r\n  grid-template-rows: 100<\/span>px<\/span> 200<\/span>px<\/span> 100<\/span>px<\/span>;\r\n\r\n  grid-template-areas:\r\n        \"head head2 . side\"<\/span>\r\n        \"main main2 . side\"<\/span>\r\n        \"footer footer footer footer\"<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
grid-template-columns<\/span>: 1fr<\/span> 1fr<\/span> 1fr<\/span> 1fr<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u0686\u0647\u0627\u0631 \u0633\u062a\u0648\u0646 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0645\u0633\u0627\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u0647\u0631 \u0633\u062a\u0648\u0646 \u06cc\u06a9 \u0633\u0647\u0645 \u0628\u0631\u0627\u0628\u0631 \u0627\u0632 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\n
\u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 fr<\/h1>\n
\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 fr<\/code>\u060c \u067e\u06cc\u06a9\u0633\u0644 \u0648 \u062f\u0631\u0635\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
.container<\/span> {\r\n\r\n  grid-template-columns: 1<\/span>fr<\/span> 1<\/span>fr<\/span> 40<\/span>px<\/span> 20<\/span>%<\/span>;\r\n  grid-template-rows: 100<\/span>px<\/span> 200<\/span>px<\/span> 100<\/span>px<\/span>;\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a:<\/p>\n