{"id":823,"date":"2026-10-30T17:03:59","date_gmt":"2026-10-30T14:03:59","guid":{"rendered":"https:\/\/keefwiki.com\/code\/?p=823"},"modified":"2026-10-30T17:04:00","modified_gmt":"2026-10-30T14:04:00","slug":"%d9%88%d8%a7%d8%ac%d9%87%d8%a9-%d9%85%d8%aa%d8%ac%d8%a7%d9%88%d8%a8%d8%a9-css-grid","status":"publish","type":"post","link":"https:\/\/keefwiki.com\/code\/2026\/10\/30\/%d9%88%d8%a7%d8%ac%d9%87%d8%a9-%d9%85%d8%aa%d8%ac%d8%a7%d9%88%d8%a8%d8%a9-css-grid\/","title":{"rendered":"\u0643\u064a\u0641\u064a\u0629 \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid"},"content":{"rendered":"<p class=\"wp-block-paragraph\">\u062a\u0633\u0627\u0639\u062f\u0643 <strong>\u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/strong> \u0639\u0644\u0649 \u0639\u0631\u0636 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0648\u0636\u0648\u062d \u0639\u0644\u0649 \u0627\u0644\u0647\u0627\u062a\u0641 \u0648\u0627\u0644\u062a\u0627\u0628\u0644\u062a \u0648\u0627\u0644\u062d\u0627\u0633\u0648\u0628\u060c \u062f\u0648\u0646 \u062a\u0635\u0645\u064a\u0645 \u0646\u0633\u062e\u0629 \u0645\u0646\u0641\u0635\u0644\u0629 \u0644\u0643\u0644 \u0634\u0627\u0634\u0629. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid \u064a\u0645\u0643\u0646\u0643 \u0625\u0646\u0634\u0627\u0621 \u0634\u0628\u0643\u0629 \u0628\u0637\u0627\u0642\u0627\u062a \u064a\u062a\u063a\u064a\u0631 \u0639\u062f\u062f \u0623\u0639\u0645\u062f\u062a\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u062d\u0633\u0628 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062a\u0627\u062d\u0629. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0644\u064a\u0644 \u0633\u062a\u0628\u0646\u064a \u0645\u062b\u0627\u0644\u064b\u0627 \u0643\u0627\u0645\u0644\u064b\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS\u060c \u062b\u0645 \u062a\u062e\u062a\u0628\u0631 \u0633\u0644\u0648\u0643\u0647 \u0648\u062a\u0641\u0647\u0645 \u0643\u064a\u0641\u064a\u0629 \u062a\u0639\u062f\u064a\u0644\u0647.<\/p>\n\n<h2 class=\"wp-block-heading\">\u0645\u0627 \u0627\u0644\u0630\u064a \u062a\u062d\u062a\u0627\u062c\u0647 \u0642\u0628\u0644 \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629\u061f<\/h2>\n\n<p class=\"wp-block-paragraph\">\u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0645\u062d\u0631\u0631 \u0646\u0635\u0648\u0635 \u0645\u062b\u0644 Visual Studio Code \u0648\u0645\u062a\u0635\u0641\u062d \u062d\u062f\u064a\u062b. \u0643\u0645\u0627 \u064a\u0643\u0641\u064a \u0623\u0646 \u062a\u0639\u0631\u0641 \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0639\u0646\u0627\u0635\u0631 HTML \u0648\u0637\u0631\u064a\u0642\u0629 \u0643\u062a\u0627\u0628\u0629 \u0642\u0648\u0627\u0639\u062f CSS. \u0648\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u0635\u0641\u0631\u060c \u0631\u0627\u062c\u0639 \u0623\u0648\u0644\u064b\u0627 <a href=\"https:\/\/keefwiki.com\/code\/2015\/05\/18\/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d9%83%d8%aa%d8%a7%d8%a8%d8%a9-%d9%83%d9%88%d8%af-css\/\">\u0643\u064a\u0641\u064a\u0629 \u0643\u062a\u0627\u0628\u0629 \u0643\u0648\u062f CSS<\/a>. \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0645\u0643\u062a\u0628\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u0623\u0648 JavaScript \u0644\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0645\u062b\u0627\u0644.<\/p>\n\n<h2 class=\"wp-block-heading\">\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid\u061f<\/h2>\n\n<p class=\"wp-block-paragraph\">\u062a\u062d\u0648\u0651\u0644 \u0627\u0644\u062e\u0627\u0635\u064a\u0629 <code>display: grid<\/code> \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u062d\u0627\u0648\u064a \u0625\u0644\u0649 \u0634\u0628\u0643\u0629. \u0628\u0639\u062f \u0630\u0644\u0643 \u062a\u062d\u062f\u062f <code>grid-template-columns<\/code> \u0637\u0631\u064a\u0642\u0629 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u0639\u0645\u062f\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u0636\u064a\u0641 <code>gap<\/code> \u0645\u0633\u0627\u0641\u0629 \u062b\u0627\u0628\u062a\u0629 \u0628\u064a\u0646\u0647\u0627. \u0648\u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code>repeat()<\/code> \u0645\u0639 <code>auto-fit<\/code> \u062d\u062a\u0649 \u064a\u062e\u062a\u0627\u0631 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0648\u0641\u0642 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0645\u062a\u0627\u062d.<\/p>\n\n<p class=\"wp-block-paragraph\">\u0623\u0645\u0627 \u0627\u0644\u062f\u0627\u0644\u0629 <code>minmax()<\/code> \u0641\u062a\u062d\u062f\u062f \u062d\u062f\u064b\u0627 \u0623\u062f\u0646\u0649 \u0644\u0639\u0631\u0636 \u0627\u0644\u0639\u0645\u0648\u062f \u0648\u062d\u062f\u064b\u0627 \u0623\u0642\u0635\u0649 \u0645\u0631\u0646\u064b\u0627. \u0633\u0646\u0633\u062a\u062e\u062f\u0645 <code>min(100%, 240px)<\/code> \u0643\u062d\u062f \u0623\u062f\u0646\u0649 \u062d\u062a\u0649 \u0644\u0627 \u064a\u0641\u0631\u0636 \u0627\u0644\u0639\u0645\u0648\u062f \u0639\u0631\u0636\u064b\u0627 \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0636\u064a\u0642\u0629. \u0648\u062a\u0633\u0645\u062d \u0627\u0644\u0642\u064a\u0645\u0629 <code>1fr<\/code> \u0644\u0644\u0623\u0639\u0645\u062f\u0629 \u0628\u062a\u0642\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a.<\/p>\n\n<h2 class=\"wp-block-heading\">\u062e\u0637\u0648\u0627\u062a \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid<\/h2>\n\n<h3 class=\"wp-block-heading\">1. \u0623\u0646\u0634\u0626 \u0645\u0644\u0641 HTML \u0648\u0623\u0636\u0641 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a<\/h3>\n\n<p class=\"wp-block-paragraph\">\u0627\u0641\u062a\u062d \u0645\u062d\u0631\u0631 \u0627\u0644\u0623\u0643\u0648\u0627\u062f \u0648\u0623\u0646\u0634\u0626 \u0645\u0644\u0641\u064b\u0627 \u0628\u0627\u0633\u0645 <code>index.html<\/code>. \u0627\u0646\u0633\u062e \u0627\u0644\u0645\u062b\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a \u0643\u0627\u0645\u0644\u064b\u0627\u061b \u0641\u0647\u0648 \u064a\u062a\u0636\u0645\u0646 \u0647\u064a\u0643\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0648\u062e\u0645\u0633 \u0628\u0637\u0627\u0642\u0627\u062a \u0648\u0646\u0645\u0637 CSS \u0641\u064a \u0645\u0644\u0641 \u0648\u0627\u062d\u062f. \u064a\u0645\u0643\u0646\u0643 \u062a\u063a\u064a\u064a\u0631 \u0646\u0635\u0648\u0635 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0648\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646\u0647\u0627 \u0644\u0627\u062d\u0642\u064b\u0627 \u062f\u0648\u0646 \u062a\u0639\u062f\u064a\u0644 \u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u064a\u062f\u0648\u064a\u064b\u0627.<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;html lang=&quot;ar&quot; dir=&quot;rtl&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;title&gt;\u0628\u0637\u0627\u0642\u0627\u062a \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid&lt;\/title&gt;\n  &lt;style&gt;\n    * { box-sizing: border-box; }\n    body {\n      font-family: system-ui, sans-serif;\n      margin: 0;\n      padding: 24px;\n      background: #f5f7fb;\n      color: #17243a;\n    }\n    main { max-width: 1080px; margin: auto; }\n    .cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));\n      gap: 16px;\n    }\n    .card {\n      padding: 24px;\n      border: 1px solid #dfe5ed;\n      border-radius: 12px;\n      background: #ffffff;\n    }\n    .card h2 { margin-top: 0; }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;main&gt;\n    &lt;h1&gt;\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0648\u0642\u0639&lt;\/h1&gt;\n    &lt;section class=&quot;cards&quot; aria-label=&quot;\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0648\u0642\u0639&quot;&gt;\n      &lt;article class=&quot;card&quot;&gt;&lt;h2&gt;\u0627\u0644\u062a\u0635\u0645\u064a\u0645&lt;\/h2&gt;&lt;p&gt;\u0648\u0627\u062c\u0647\u0629 \u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645.&lt;\/p&gt;&lt;\/article&gt;\n      &lt;article class=&quot;card&quot;&gt;&lt;h2&gt;\u0627\u0644\u0628\u0631\u0645\u062c\u0629&lt;\/h2&gt;&lt;p&gt;\u0623\u0645\u062b\u0644\u0629 \u0639\u0645\u0644\u064a\u0629 \u0648\u0627\u0636\u062d\u0629.&lt;\/p&gt;&lt;\/article&gt;\n      &lt;article class=&quot;card&quot;&gt;&lt;h2&gt;\u0627\u0644\u0645\u062d\u062a\u0648\u0649&lt;\/h2&gt;&lt;p&gt;\u0646\u0635\u0648\u0635 \u0645\u0646\u0638\u0645\u0629 \u0648\u0645\u0642\u0631\u0648\u0621\u0629.&lt;\/p&gt;&lt;\/article&gt;\n      &lt;article class=&quot;card&quot;&gt;&lt;h2&gt;\u0627\u0644\u0623\u062f\u0627\u0621&lt;\/h2&gt;&lt;p&gt;\u0635\u0641\u062d\u0627\u062a \u0633\u0631\u064a\u0639\u0629 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629.&lt;\/p&gt;&lt;\/article&gt;\n      &lt;article class=&quot;card&quot;&gt;&lt;h2&gt;\u0627\u0644\u062f\u0639\u0645&lt;\/h2&gt;&lt;p&gt;\u0645\u0633\u0627\u0639\u062f\u0629 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629.&lt;\/p&gt;&lt;\/article&gt;\n    &lt;\/section&gt;\n  &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">2. \u0627\u0641\u0647\u0645 \u0642\u0648\u0627\u0639\u062f \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u0639\u0645\u062f\u0629<\/h3>\n\n<p class=\"wp-block-paragraph\">\u0641\u064a \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0628\u062f\u0623 \u0643\u0644 \u0639\u0645\u0648\u062f \u0628\u0639\u0631\u0636 \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u0628\u0637\u0627\u0642\u0629 \u0645\u0627 \u062f\u0627\u0645\u062a \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u062a\u0633\u0645\u062d \u0628\u0630\u0644\u0643. \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u0633\u0639 \u0627\u0644\u0634\u0627\u0634\u0629\u060c \u064a\u0646\u0634\u0626 <code>auto-fit<\/code> \u0623\u0639\u0645\u062f\u0629 \u0625\u0636\u0627\u0641\u064a\u0629 \u0648\u064a\u062c\u0639\u0644 <code>1fr<\/code> \u0639\u0631\u0636\u0647\u0627 \u0645\u0631\u0646\u064b\u0627. \u0623\u0645\u0627 \u0625\u0630\u0627 \u0636\u0627\u0642\u062a \u0627\u0644\u0634\u0627\u0634\u0629\u060c \u0641\u064a\u0642\u0644 \u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0648\u062a\u0646\u062a\u0642\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0632\u0627\u0626\u062f\u0629 \u0625\u0644\u0649 \u0635\u0641\u0648\u0641 \u062a\u0627\u0644\u064a\u0629. \u0644\u0630\u0644\u0643 \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0643\u062a\u0627\u0628\u0629 \u0639\u062f\u062f \u062b\u0627\u0628\u062a \u0645\u0646 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0644\u0643\u0644 \u062c\u0647\u0627\u0632.<\/p>\n\n<h3 class=\"wp-block-heading\">3. \u0627\u062e\u062a\u0628\u0631 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0639\u0644\u0649 \u0623\u062d\u062c\u0627\u0645 \u0645\u062e\u062a\u0644\u0641\u0629<\/h3>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"490\" src=\"https:\/\/keefwiki.com\/wp-content\/uploads\/sites\/4\/2026\/10\/css-grid-responsive-card-layout.jpg\" alt=\"\u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid \u062a\u0648\u0636\u062d \u0634\u0628\u0643\u0629 \u0628\u0637\u0627\u0642\u0627\u062a \u064a\u062a\u063a\u064a\u0631 \u062a\u0648\u0632\u064a\u0639\u0647\u0627 \u0628\u064a\u0646 \u0627\u0644\u062d\u0627\u0633\u0648\u0628 \u0648\u0627\u0644\u062a\u0627\u0628\u0644\u062a \u0648\u0627\u0644\u0647\u0627\u062a\u0641\" class=\"wp-image-945\" srcset=\"https:\/\/keefwiki.com\/wp-content\/uploads\/sites\/4\/2026\/10\/css-grid-responsive-card-layout.jpg 900w, https:\/\/keefwiki.com\/wp-content\/uploads\/sites\/4\/2026\/10\/css-grid-responsive-card-layout-300x163.jpg 300w, https:\/\/keefwiki.com\/wp-content\/uploads\/sites\/4\/2026\/10\/css-grid-responsive-card-layout-768x418.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">\u0627\u062d\u0641\u0638 \u0627\u0644\u0645\u0644\u0641 \u0648\u0627\u0641\u062a\u062d\u0647 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0628\u0639\u062f \u0630\u0644\u0643 \u0627\u0641\u062a\u062d \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0637\u0648\u0631 \u0648\u0627\u062e\u062a\u0631 \u0648\u0636\u0639 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u062c\u0647\u0632\u0629\u060c \u0623\u0648 \u0635\u063a\u0651\u0631 \u0639\u0631\u0636 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u064a\u062f\u0648\u064a\u064b\u0627. \u0631\u0627\u0642\u0628 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0639\u0646\u062f\u0645\u0627 \u062a\u0635\u0628\u062d \u0641\u064a \u0639\u0645\u0648\u062f \u0648\u0627\u062d\u062f\u060c \u062b\u0645 \u0639\u0645\u0648\u062f\u064a\u0646 \u0623\u0648 \u0623\u0643\u062b\u0631. \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u0639\u062f\u062f \u0627\u0644\u0641\u0639\u0644\u064a \u0639\u0644\u0649 \u0639\u0631\u0636 \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0634\u0628\u0643\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646\u0647\u0627\u060c \u0648\u0644\u064a\u0633 \u0639\u0644\u0649 \u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0627\u0632 \u0648\u062d\u062f\u0647.<\/p>\n\n<p class=\"wp-block-paragraph\">\u062a\u0623\u0643\u062f \u0623\u064a\u0636\u064b\u0627 \u0645\u0646 \u0639\u062f\u0645 \u0638\u0647\u0648\u0631 \u062a\u0645\u0631\u064a\u0631 \u0623\u0641\u0642\u064a \u063a\u064a\u0631 \u0645\u0642\u0635\u0648\u062f\u060c \u0648\u0645\u0646 \u0628\u0642\u0627\u0621 \u0627\u0644\u0646\u0635 \u062f\u0627\u062e\u0644 \u0643\u0644 \u0628\u0637\u0627\u0642\u0629 \u0645\u0642\u0631\u0648\u0621\u064b\u0627. \u0648\u0625\u0630\u0627 \u0627\u0633\u062a\u062e\u062f\u0645\u062a \u0645\u062d\u062a\u0648\u0649 \u0637\u0648\u064a\u0644\u064b\u0627 \u0645\u062b\u0644 \u0631\u0627\u0628\u0637 \u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0643\u0633\u0631\u060c \u0641\u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 <code>overflow-wrap: anywhere<\/code> \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629. \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u0627\u062e\u062a\u0628\u0631 \u062a\u0643\u0628\u064a\u0631 \u0627\u0644\u0646\u0635 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u062d\u062a\u0649 \u062a\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0644\u0627 \u064a\u0642\u062a\u0637\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649.<\/p>\n\n<h2 class=\"wp-block-heading\">\u0645\u062a\u0649 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 Media Queries \u0645\u0639 CSS Grid\u061f<\/h2>\n\n<p class=\"wp-block-paragraph\">\u062a\u0646\u062c\u0632 \u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u062f\u0648\u0646 \u0646\u0642\u0627\u0637 \u062a\u0648\u0642\u0641 \u062b\u0627\u0628\u062a\u0629. \u0645\u0639 \u0630\u0644\u0643\u060c \u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0633\u062a\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u0648\u0633\u0627\u0626\u0637 <code>@media<\/code> \u0625\u0630\u0627 \u0623\u0631\u062f\u062a \u062a\u063a\u064a\u064a\u0631 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0646\u0642\u0644 \u0623\u0648 \u062a\u0631\u062a\u064a\u0628 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0648 \u062d\u062c\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0639\u0646\u062f \u0639\u0631\u0636 \u0645\u0639\u064a\u0646. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0647\u0648\u0627\u0645\u0634 \u0639\u0644\u0649 \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u062f\u0648\u0646 \u0627\u0644\u0645\u0633\u0627\u0633 \u0628\u0637\u0631\u064a\u0642\u0629 \u0639\u0645\u0644 \u0627\u0644\u0634\u0628\u0643\u0629.<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">@media (max-width: 480px) {\n  body { padding: 12px; }\n  .card { padding: 16px; }\n}<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\">\u0623\u062e\u0637\u0627\u0621 \u0634\u0627\u0626\u0639\u0629 \u0639\u0646\u062f \u062a\u0635\u0645\u064a\u0645 \u0634\u0628\u0643\u0629 CSS Grid \u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/h2>\n\n<ul class=\"wp-block-list\"><li><strong>\u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u062b\u0627\u0628\u062a \u0643\u0628\u064a\u0631 \u0644\u0644\u0628\u0637\u0627\u0642\u0629:<\/strong> \u0642\u062f \u064a\u0646\u062a\u062c \u0639\u0646\u0647 \u062a\u0645\u0631\u064a\u0631 \u0623\u0641\u0642\u064a \u0639\u0644\u0649 \u0627\u0644\u0647\u0627\u062a\u0641\u061b \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u064a\u0627\u0633\u0627\u062a \u0645\u0631\u0646\u0629 \u0648\u062d\u062f\u064b\u0627 \u0623\u062f\u0646\u0649 \u0644\u0627 \u064a\u062a\u062c\u0627\u0648\u0632 \u0639\u0631\u0636 \u0627\u0644\u062d\u0627\u0648\u064a\u0629.<\/li><li><strong>\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0635\u0648\u0631\u0629 \u0644\u062a\u0648\u0636\u064a\u062d \u0627\u0644\u0643\u0648\u062f:<\/strong> \u0627\u062d\u062a\u0641\u0638 \u0628\u0643\u0648\u062f HTML \u0648 CSS \u0642\u0627\u0628\u0644\u064b\u0627 \u0644\u0644\u0646\u0633\u062e\u060c \u0648\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 \u0644\u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0641\u0642\u0637.<\/li><li><strong>\u0627\u0644\u062e\u0644\u0637 \u0628\u064a\u0646 auto-fit \u0648 auto-fill:<\/strong> \u0642\u062f \u064a\u062d\u062c\u0632 <code>auto-fill<\/code> \u0645\u0633\u0627\u0631\u0627\u062a \u0641\u0627\u0631\u063a\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u062f\u0645\u062c <code>auto-fit<\/code> \u0627\u0644\u0645\u0633\u0627\u0631\u0627\u062a \u0627\u0644\u0641\u0627\u0631\u063a\u0629 \u0648\u064a\u0648\u0633\u0651\u0639 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0639\u0646\u062f \u062a\u0648\u0641\u0631 \u0645\u0633\u0627\u062d\u0629.<\/li><li><strong>\u0625\u0647\u0645\u0627\u0644 \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0642\u064a\u0642\u064a:<\/strong> \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0637\u0648\u064a\u0644\u0629 \u0648\u0627\u0644\u0635\u0648\u0631 \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0642\u062f \u062a\u063a\u064a\u0651\u0631 \u0633\u0644\u0648\u0643 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a\u061b \u062c\u0631\u0651\u0628\u0647\u0627 \u0642\u0628\u0644 \u0627\u0644\u0646\u0634\u0631.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">\u0643\u064a\u0641 \u062a\u0637\u0648\u0651\u0631 \u0627\u0644\u0645\u062b\u0627\u0644 \u0628\u0639\u062f \u0630\u0644\u0643\u061f<\/h2>\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f \u0646\u062c\u0627\u062d \u0627\u0644\u0646\u0645\u0648\u0630\u062c\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0635\u0648\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0628\u0634\u0631\u0637 \u0636\u0628\u0637 <code>max-width: 100%<\/code> \u0644\u0647\u0627. \u0643\u0645\u0627 \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code>grid-column<\/code> \u0644\u0625\u0628\u0631\u0627\u0632 \u0628\u0637\u0627\u0642\u0629 \u0645\u0647\u0645\u0629 \u0639\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0639\u0645\u0648\u062f\u060c \u0645\u0639 \u0645\u0631\u0627\u062c\u0639\u0629 \u0633\u0644\u0648\u0643\u0647\u0627 \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0636\u064a\u0642\u0629. \u0648\u0625\u0630\u0627 \u0631\u063a\u0628\u062a \u0641\u064a \u062a\u0639\u0645\u064a\u0642 \u0641\u0647\u0645\u0643\u060c \u0631\u0627\u062c\u0639 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/CSS_layout\/Grids\" target=\"_blank\" rel=\"noopener noreferrer\">\u0634\u0631\u062d CSS Grid \u0627\u0644\u0631\u0633\u0645\u064a \u0639\u0644\u0649 MDN<\/a>\u060c \u0627\u0644\u0630\u064a \u064a\u0648\u0636\u062d <code>auto-fit<\/code> \u0648 <code>minmax()<\/code> \u0628\u0623\u0645\u062b\u0644\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629.<\/p>\n\n<p class=\"wp-block-paragraph\">\u0628\u0647\u0630\u0647 \u0627\u0644\u062e\u0637\u0648\u0627\u062a \u0623\u0635\u0628\u062d\u062a \u0644\u062f\u064a\u0643 <strong>\u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/strong> \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0637\u0648\u064a\u0631. \u0627\u0644\u0623\u0647\u0645 \u0647\u0648 \u0623\u0646 \u062a\u062e\u062a\u0628\u0631 \u0627\u0644\u0634\u0628\u0643\u0629 \u0645\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0648\u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0646\u0648\u0627\u0641\u0630 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629\u060c \u0628\u062f\u0644 \u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0642\u064a\u0627\u0633 \u0634\u0627\u0634\u0629 \u0648\u0627\u062d\u062f\u0629.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u062e\u0637\u0648\u0627\u062a \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid \u0645\u0639 \u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u064a \u0643\u0627\u0645\u0644 \u064a\u0648\u0632\u0639 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0644\u0649 \u0627\u0644\u0647\u0627\u062a\u0641 \u0648\u0627\u0644\u062a\u0627\u0628\u0644\u062a \u0648\u0627\u0644\u062d\u0627\u0633\u0648\u0628.<\/p>\n","protected":false},"author":2,"featured_media":842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_keef_sources":[{"title":"CSS Grid Layout","url":"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout","organization":"MDN Web Docs"}],"footnotes":""},"categories":[4],"tags":[29,116],"class_list":["post-823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-css-grid"],"_links":{"self":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/comments?post=823"}],"version-history":[{"count":5,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/823\/revisions"}],"predecessor-version":[{"id":946,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/823\/revisions\/946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/media\/842"}],"wp:attachment":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/media?parent=823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/categories?post=823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/tags?post=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}