{"id":3230,"date":"2021-10-07T20:00:12","date_gmt":"2021-10-07T16:30:12","guid":{"rendered":"http:\/\/rabsana.ir\/tutorials\/?p=3230"},"modified":"2021-10-08T12:02:08","modified_gmt":"2021-10-08T08:32:08","slug":"compare-flexbox-and-css-grid-in-terms-of-rule-and-content","status":"publish","type":"post","link":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/","title":{"rendered":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627"},"content":{"rendered":"

\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644 \u062f\u0631 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc<\/a> \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

 <\/p>\n

\u0645\u0642\u0627\u06cc\u0633\u0647 Grid \u0648 Flexbox \u0627\u0632 \u0646\u0638\u0631 \u0645\u062d\u062a\u0648\u0627 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc<\/strong><\/h2>\n

 <\/p>\n

\u0645\u0634\u062e\u0635\u0627\u062a W3C \u0628\u0631\u0627\u06cc Flexbox \u0648 Grid \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0634\u0641\u0627\u0641 \u0633\u0627\u0632\u06cc \u0639\u0628\u0627\u0631\u0627\u062a “\u0627\u0632 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0628\u06cc\u0631\u0648\u0646” \u0648 “\u0627\u0632 \u0686\u06cc\u062f\u0645\u0627\u0646 \u062f\u0631\u0648\u0646” \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.<\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f Flexbox \u060c \u0645\u0634\u062e\u0635\u0627\u062a \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f –<\/p>\n

\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0641\u0636\u0627 \u0648 \u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0637\u0631\u06cc\u0642\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0648 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u063a\u0644\u0628 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f.<\/p>\n

\u0628\u0647 \u0639\u0628\u0627\u0631\u062a \u062f\u06cc\u06af\u0631 \u060c \u0622\u0646\u0686\u0647 Flexbox \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u06cc \u06af\u0648\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a: \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u0641\u0642\u0637 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0627\u0641\u0642\u06cc (\u06cc\u0627 \u0639\u0645\u0648\u062f\u06cc \u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645) \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0645\u0645\u06a9\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0636\u0627\u06cc \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f Grid \u060c \u0645\u0634\u062e\u0635\u0627\u062a Grid \u0622\u0646 \u0631\u0627 \u0631\u0648\u0634\u0646 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n

\u0645\u06a9\u0627\u0646\u06cc\u0632\u0645\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0648\u06cc\u0633\u0646\u062f\u06af\u0627\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0628\u0647 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0633\u0637\u0631\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0631\u0641\u062a\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0642\u0627\u0628\u0644 \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u0646\u062f.<\/p>\n

\u0633\u067e\u0633 \u0646\u0648\u06cc\u0633\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0639\u0646\u0627\u0635\u0631 \u0628\u0644\u0648\u06a9 \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062f\u0642\u06cc\u0642 \u062f\u0631 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u062a\u0642\u0627\u0637\u0639 \u0627\u06cc\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0631\u062f\u06cc\u0641 \u0647\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u0646\u062f.<\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f Grid \u060c \u0646\u0642\u0637\u0647 \u0639\u0632\u06cc\u0645\u062a \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0627\u0632 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0631\u062f\u06cc\u0641 \u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 Grid \u0635\u0631\u06cc\u062d \u06cc\u0627 \u0636\u0645\u0646\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u06a9\u062f \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u06cc \u06af\u0648\u06cc\u062f: \u0627\u06cc\u0646 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0646 \u0647\u0633\u062a\u0646\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u062f\u0631 \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u0628\u06a9\u0647 \u062f\u0631 \u0645\u06a9\u0627\u0646\u0647\u0627\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n

\u0647\u0631\u0686\u0642\u062f\u0631 \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0628\u062d\u062b \u06a9\u0646\u0648\u0646\u06cc \u0642\u0627\u0646\u0639 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a \u060c \u0645\u0646 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0638\u0631\u0641 \u0634\u0628\u06a9\u0647 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f:<\/p>\n

 <\/p>\n

grid-template-columns: repeat(auto-fit, minmax(minimum width, 1fr));<\/strong><\/p>\n

 <\/p>\n

\u0627\u06cc\u0646 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 \u0646\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062a\u0639\u062f\u0627\u062f \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0633\u0637\u0631\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u062e\u0627\u0635 \u0627\u0632 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u0633\u062a\u0648\u0646 \u06cc\u0627 \u0633\u0637\u0631 \u06cc\u06a9 \u060c \u062f\u0648 \u0648 \u063a\u06cc\u0631\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f \u060c \u0628\u0641\u0647\u0645\u062f.<\/p>\n

\u06a9\u0645\u06cc \u0634\u0628\u06cc\u0647 Flexbox \u060c \u0627\u0645\u0627 \u0628\u0627 \u062a\u0631\u0627\u0632 \u06a9\u0627\u0645\u0644. (\u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc Grid \u0628\u0627 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0633\u06cc\u0628 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0642\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.)<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0627\u06af\u0631\u0686\u0647 \u0645\u0646 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0633\u0648\u0645 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u060c \u0627\u0645\u0627 \u0647\u0646\u0648\u0632 \u0686\u06cc\u0632\u06cc \u0628\u0647 \u0645\u0646 \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 Grid \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u062f.<\/p>\n

 <\/p>\n

\u0642\u0648\u0627\u0646\u06cc\u0646 Flexbox \u0648 Grid<\/strong><\/h3>\n

 <\/p>\n

Grid \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u06a9\u062b\u0631 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 Flexbox \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u060c \u0628\u0647 \u0627\u0633\u062a\u062b\u0646\u0627\u06cc \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u062f\u0648\u062f\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647.<\/p>\n

\u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u060c \u0645\u0646 \u062a\u0645\u0627\u06cc\u0644 \u062f\u0627\u0631\u0645 \u0645\u0648\u0636\u0639 \u06a9\u0631\u06cc\u0633 \u06a9\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0636\u0648\u0639 \u062a\u0648\u06cc\u06cc\u062a\u0631 \u062e\u0648\u062f \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0645 \u060c \u06a9\u0647 \u0645\u0634\u0627\u0628\u0647 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0648\u0633 \u0628\u0648\u0633 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a. \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u067e\u06cc\u0634 \u0645\u06cc \u0631\u0648\u062f:<\/p>\n

\u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0646 \u0641\u0642\u0637 \u0628\u0647 \u0686\u0646\u062f \u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 Flexbox \u0628\u0647 \u0622\u0646\u0647\u0627 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0631\u0633\u06cc\u062f\u06af\u06cc \u06a9\u0646\u0645 \u060c \u0628\u06cc\u0634\u062a\u0631 \u0628\u0631\u0627\u06cc Grid \u0645\u06cc \u0631\u0648\u0645.<\/p>\n

 <\/p>\n

\u0686\u0647 \u0645\u0648\u0642\u0639 \u0628\u0627\u06cc\u062f \u0627\u0632 Flexbox \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u061f<\/strong><\/h2>\n

 <\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0627\u0634\u0627\u0631\u0647 \u0634\u062f \u060c \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 Flexbox \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u062f\u0631 \u062e\u0637\u0648\u0637 \u0645\u062e\u062a\u0644\u0641 \u0628\u067e\u06cc\u0686\u062f \u060c \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0641\u0642\u0637 \u0628\u0647 \u062a\u0648\u0632\u06cc\u0639 \u0627\u0642\u0644\u0627\u0645 \u062e\u0648\u062f \u062f\u0631 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0639\u0631\u0636 \u0645\u062a\u0641\u0627\u0648\u062a \u0622\u0646\u0647\u0627 \u0627\u0647\u0645\u06cc\u062a \u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0627\u0631\u062a\u0628\u0627\u0637\u06cc \u0628\u0627 \u062e\u0637\u0648\u0637 \u0628\u0627\u0644\u0627 \u06cc\u0627 \u067e\u0627\u06cc\u06cc\u0646.<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0627\u06af\u0631 \u062f\u0646\u0628\u0627\u0644 \u0631\u062f\u06cc\u0641 \u0647\u0627 \u0648 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u062a\u0631\u0627\u0632 \u0634\u062f\u0647 \u0634\u0628\u06cc\u0647 \u0634\u0628\u06a9\u0647 \u0646\u0628\u0627\u0634\u0645 \u060c \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 Flexbox \u0645\u06cc \u0631\u0648\u0645.<\/p>\n

 <\/p>\n

HTML :<\/h5>\n

 <\/p>\n

<div class=”tags-container”><\/strong><\/p>\n

<a href=”#” class=”tag-link”>abyssinian cat<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>bengal cat<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>persian cat<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>american bobtail<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>american curl<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>balinese<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>bombay<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>british shorthair<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>burmilla<\/a><\/strong><\/p>\n

<a href=”#” class=”tag-link”>calico<\/a><\/strong><\/p>\n

<\/div><\/strong><\/p>\n

 <\/p>\n

CSS :<\/h5>\n

 <\/p>\n

* {<\/strong><\/p>\n

box-sizing: border-box;<\/strong><\/p>\n

}<\/strong><\/p>\n

body {<\/strong><\/p>\n

margin: 0;<\/strong><\/p>\n

padding: 0;<\/strong><\/p>\n

height: 100vh;<\/strong><\/p>\n

font-size: 1.5rem;<\/strong><\/p>\n

display: flex;<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

}<\/strong><\/p>\n

a {<\/strong><\/p>\n

text-decoration: none;<\/strong><\/p>\n

}<\/strong><\/p>\n

.tags-container {<\/strong><\/p>\n

max-width: 800px;<\/strong><\/p>\n

margin: 2rem auto;<\/strong><\/p>\n

display: flex;<\/strong><\/p>\n

gap: 10px;<\/strong><\/p>\n

justify-content: center;<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

flex-wrap: wrap;<\/strong><\/p>\n

}<\/strong><\/p>\n

.tag-link {<\/strong><\/p>\n

background-color: #ddd;<\/strong><\/p>\n

border-radius: 10px;<\/strong><\/p>\n

text-align: center;<\/strong><\/p>\n

padding: 1rem;<\/strong><\/p>\n

color: #333;<\/strong><\/p>\n

}<\/strong><\/p>\n

.tag-link:hover,<\/strong><\/p>\n

.tag-link:focus {<\/strong><\/p>\n

color: #111;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/h5>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

\u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Flexbox \u0631\u0627 \u062f\u0631 Grid \u062f\u0631 \u0646\u0638\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u06cc\u06a9 \u0637\u0631\u062d \u0633\u0627\u062f\u0647 \u0648 \u06cc\u06a9 \u0628\u0639\u062f\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631\u06cc \u0647\u0633\u062a\u0645 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0648\u0631 \u0628\u0632\u0646\u0645 \u0648 \u06cc\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062a\u062d\u0631\u06cc\u06a9 \u06a9\u0646\u0645.<\/p>\n

Flexbox \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0641\u0642\u0637 \u0628\u0627 \u06cc\u06a9 \u0642\u0627\u0646\u0648\u0646 \u062f\u0631 \u0638\u0631\u0641 flex \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n

 <\/p>\n

flex-direction: row-reverse\/column-reverse<\/strong><\/p>\n

 <\/p>\n

\u0634\u0645\u0627 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 Grid \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u060c \u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u06cc\u0698\u06af\u06ccorder \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u0639\u0646\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u060c \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f.<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0627\u0632 \u067e\u06cc\u0627\u0645\u062f\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u060c \u0686\u0647 \u062f\u0631 Flexbox \u0648 \u0686\u0647 \u062f\u0631 Grid \u060c \u0622\u06af\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f<\/p>\n

\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u060c Flexbox \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0646\u062f\u0627\u0632\u0647 \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u062f\u0648\u0646 \u0632\u062d\u0645\u062a \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0646\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 Grid \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062a\u0642\u0627\u0628\u0644 \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f Flexbox \u0647\u0631 \u062f\u0648 \u0645\u0648\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a.<\/p>\n

 <\/p>\n

HTML :<\/h5>\n

 <\/p>\n

<div class=”container”><\/strong><\/p>\n

<button class=”reverse-btn”>Reverse the order<\/button><\/strong><\/p>\n

<div class=”scroller”><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1594616838951-c155f8d978a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzc2OTk0MQ&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>Jack <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzgyNzYwNA&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>John <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1558898479-33c0057a5d12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzc2OTk0MQ&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>Maria <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1489424731084-a5d8b219a5bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzgyNjQ3Nw&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>Jane <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1586297135537-94bc9ba060aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzc3MDY4NA&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>Mary <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1474176857210-7287d38d27c6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzgyNjU2NA&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>George <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<figure class=”scroller-info”><\/strong><\/p>\n

<img class=”scroller-pic” src=’https:\/\/images.unsplash.com\/photo-1614436163996-25cee5f54290?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzgyNzY4MQ&ixlib=rb-1.2.1&q=80&w=400′ alt=’client’><\/strong><\/p>\n

<figcaption class=”scroller-caption”>Anne <br> Click Me!<\/figcaption><\/strong><\/p>\n

<\/figure><\/strong><\/p>\n

<\/div><\/strong><\/p>\n

<\/div><\/strong><\/p>\n

 <\/p>\n

CSS :<\/h5>\n

 <\/p>\n

* {<\/strong><\/p>\n

box-sizing: border-box;<\/strong><\/p>\n

}<\/strong><\/p>\n

body {<\/strong><\/p>\n

margin: 0;<\/strong><\/p>\n

padding: 0;<\/strong><\/p>\n

height: 100vh;<\/strong><\/p>\n

}<\/strong><\/p>\n

.container {<\/strong><\/p>\n

max-width: 600px;<\/strong><\/p>\n

margin: 4rem auto;<\/strong><\/p>\n

overflow-x: scroll;<\/strong><\/p>\n

}<\/strong><\/p>\n

.reverse-btn {<\/strong><\/p>\n

background-color: white;<\/strong><\/p>\n

padding: 0.5rem 1rem;<\/strong><\/p>\n

font-weight: bold;<\/strong><\/p>\n

font-size: 1.2rem;<\/strong><\/p>\n

text-transform: uppercase;<\/strong><\/p>\n

}<\/strong><\/p>\n

.reverse-btn:hover,<\/strong><\/p>\n

.reverse-btn:focus {<\/strong><\/p>\n

border-color: black;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller {<\/strong><\/p>\n

background-color: #111;<\/strong><\/p>\n

width: 1000px;<\/strong><\/p>\n

margin: 4rem auto;<\/strong><\/p>\n

padding: 1rem;<\/strong><\/p>\n

display: flex;<\/strong><\/p>\n

gap: 5px;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller.reversed {<\/strong><\/p>\n

flex-direction: row-reverse;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller-info {<\/strong><\/p>\n

background-color: rgba(255,255,255,0.2);<\/strong><\/p>\n

flex: 1;<\/strong><\/p>\n

align-self: center;<\/strong><\/p>\n

padding: 1rem;<\/strong><\/p>\n

margin: 0;<\/strong><\/p>\n

border-right: 2px dotted black;<\/strong><\/p>\n

border-left: 2px dotted black;<\/strong><\/p>\n

\/* animate the flex-grow property *\/<\/strong><\/p>\n

transition: flex-grow 0.5s;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller-info.expanded {<\/strong><\/p>\n

flex-grow: 3;<\/strong><\/p>\n

transition: flex-grow 0.5s;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller-pic {<\/strong><\/p>\n

max-width: 100%;<\/strong><\/p>\n

border: 2px solid white;<\/strong><\/p>\n

}<\/strong><\/p>\n

.scroller-caption {<\/strong><\/p>\n

font-size: 0.9rem;<\/strong><\/p>\n

font-weight: bold;<\/strong><\/p>\n

text-align: center;<\/strong><\/p>\n

color: white;<\/strong><\/p>\n

}<\/strong><\/p>\n

JS :<\/strong><\/p>\n

const scroller = document.querySelector(‘.scroller’)<\/strong><\/p>\n

const btn = document.querySelector(‘.reverse-btn’)<\/strong><\/p>\n

const picsContainer = document.querySelectorAll(‘.scroller-info’)<\/strong><\/p>\n

function toggleReverse() {<\/strong><\/p>\n

scroller.classList.toggle(‘reversed’)<\/strong><\/p>\n

}<\/strong><\/p>\n

function toggleSize() {<\/strong><\/p>\n

picsContainer.forEach(item => {<\/strong><\/p>\n

if(item.classList.contains(‘expanded’)) {<\/strong><\/p>\n

item.classList.remove(‘expanded’)<\/strong><\/p>\n

}<\/strong><\/p>\n

})<\/strong><\/p>\n

this.classList.add(‘expanded’)<\/strong><\/p>\n

}<\/strong><\/p>\n

btn.addEventListener(‘click’, toggleReverse)<\/strong><\/p>\n

picsContainer.forEach(item => {<\/strong><\/p>\n

item.addEventListener(‘click’, toggleSize)<\/strong><\/p>\n

})<\/strong><\/p>\n

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/h5>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

\u0686\u0647 \u0645\u0648\u0642\u0639 \u0628\u0627\u06cc\u062f \u0627\u0632 Grid \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u061f<\/strong><\/h2>\n

 <\/p>\n

\u0628\u0631\u0627\u06cc \u0633\u0627\u06cc\u0631 \u0645\u0648\u0627\u0631\u062f \u060c \u0645\u0646 \u0628\u0627 \u06af\u0631\u06cc\u062f \u0645\u06cc \u0631\u0648\u0645. \u0628\u062f\u06cc\u0647\u06cc \u0627\u0633\u062a \u060c \u0645\u0646 \u0628\u0627 \u062a\u0645\u0627\u0645 \u0637\u0631\u062d \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0648\u0628 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u0646\u06a9\u0631\u062f\u0647 \u0627\u0645 \u060c \u0627\u0645\u0627 \u062f\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0627\u0631\u062f \u060c \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u0645 \u0686\u06cc\u0632\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u062a\u0631 \u0627\u0632 Grid \u0631\u0627 \u0628\u0628\u06cc\u0646\u0645.<\/p>\n

\u0645\u0634\u0627\u063a\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 Grid \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u062e\u0648\u0628\u06cc Flexbox \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0645\u062b\u0627\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n

\u0639\u0646\u0627\u0635\u0631 \u0645\u0631\u06a9\u0632 \u062f\u0647\u06cc \u060c \u06a9\u0647 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0631\u0627\u06cc Flexbox \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627 Grid \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645\u0627\u0646 \u0637\u0631\u0627\u062d\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0642\u0633\u0645\u062a \u0628\u0627\u0644\u0627 \u062f\u0631 Flexbox \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS Grid \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

 <\/p>\n

HTML :<\/h5>\n

 <\/p>\n

<div class=”hero”><\/strong><\/p>\n

<svg class=”hero-icon” style=”fill:white;” viewBox=”0 0 512 512″ width=”100″ title=”cat”><\/strong><\/p>\n

<path d=”M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z” \/><\/strong><\/p>\n

<\/svg><\/strong><\/p>\n

<p class=”hero-content”>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla itaque consequuntur totam dignissimos? Vero laudantium facere tempore, ipsam dolore ex explicabo alias inventore, aliquid temporibus sunt perspiciatis praesentium accusantium.<\/p><\/strong><\/p>\n

<button class=”signup-btn”>Sign Up<\/button><\/strong><\/p>\n

<\/div><\/strong><\/p>\n

 <\/p>\n

CSS :<\/h5>\n

 <\/p>\n

\/* general styles *\/<\/strong><\/p>\n

* {<\/strong><\/p>\n

box-sizing: border-box;<\/strong><\/p>\n

}<\/strong><\/p>\n

body {<\/strong><\/p>\n

margin: 0;<\/strong><\/p>\n

padding: 0;<\/strong><\/p>\n

height: 100vh;<\/strong><\/p>\n

width: 100%;<\/strong><\/p>\n

display: grid;<\/strong><\/p>\n

\/* horizontal centering *\/<\/strong><\/p>\n

justify-items: center;<\/strong><\/p>\n

\/* vertical centering *\/<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

}<\/strong><\/p>\n

p {<\/strong><\/p>\n

margin: 0 0 1rem 0;<\/strong><\/p>\n

line-height: 1.5;<\/strong><\/p>\n

}<\/strong><\/p>\n

\/* components styles *\/<\/strong><\/p>\n

.hero {<\/strong><\/p>\n

max-width: 80ch;<\/strong><\/p>\n

background-color: rebeccapurple;<\/strong><\/p>\n

color: white;<\/strong><\/p>\n

padding: 1rem;<\/strong><\/p>\n

border-radius: 10px;<\/strong><\/p>\n

text-align: center;<\/strong><\/p>\n

\/* CSS Grid *\/<\/strong><\/p>\n

display: grid;<\/strong><\/p>\n

\/* centers vertically *\/<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

\/* centers horizontally *\/<\/strong><\/p>\n

justify-items: center;<\/strong><\/p>\n

}<\/strong><\/p>\n

.hero-icon {<\/strong><\/p>\n

margin-bottom: 1rem;<\/strong><\/p>\n

}<\/strong><\/p>\n

.hero-content {<\/strong><\/p>\n

max-width: 60ch;<\/strong><\/p>\n

}<\/strong><\/p>\n

.signup-btn {<\/strong><\/p>\n

margin-bottom: 1rem;<\/strong><\/p>\n

border: 2px solid yellow;<\/strong><\/p>\n

border-radius: 5px;<\/strong><\/p>\n

padding: 0.5rem 1rem;<\/strong><\/p>\n

text-align: center;<\/strong><\/p>\n

text-transform: uppercase;<\/strong><\/p>\n

background-color: transparent;<\/strong><\/p>\n

color: white;<\/strong><\/p>\n

font-weight: bold;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/h5>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

\u062c\u0627\u062f\u0648 \u0647\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0647 \u062e\u0637 \u0627\u0633\u062a:<\/p>\n

 <\/p>\n

.hero {<\/strong><\/p>\n

display: grid;<\/strong><\/p>\n

\/* centers vertically *\/<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

\/* centers horizontally *\/<\/strong><\/p>\n

justify-items: center;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

\u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc Flexbox \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a \u0627\u0645\u0627 \u062f\u0631 Grid \u0646\u06cc\u0632 \u0642\u0627\u0628\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a \u060c \u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a. \u0631\u0627\u0634\u0644 \u0627\u0646\u062f\u0631\u0648 \u062f\u0631 “\u0646\u062d\u0648\u0647 \u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0686\u06cc\u0632\u0647\u0627 \u062f\u0631 CSS” \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n

\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0645\u0646 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0627\u063a\u0644\u0628 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 Flexbox \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a \u060c \u0632\u06cc\u0631\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0631\u0627\u0632 \u0639\u0645\u0648\u062f\u06cc \u0631\u0627\u0647\u06cc \u0627\u0633\u062a<\/p>\n

\u0645\u0646 \u0627\u063a\u0644\u0628 \u0627\u0632 Flexbox \u0628\u0631\u0627\u06cc \u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0645\u0646\u0638\u0645 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0646\u0645\u0627\u062f\u06cc \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646\u2026<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0645\u0648\u06cc \u0631\u0627\u0634\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0646\u06a9\u062a\u0647 \u0627\u0648 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n

 <\/p>\n

HTML :<\/h5>\n

 <\/p>\n

<p>You can use Flexbox for tiny alignment jobs. <span>Such as aligning this text and icon <img src=”https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/12005\/star.png” alt=”star”><\/span> using an inline flex container.<\/p><\/p>\n

 <\/p>\n

CSS :<\/h5>\n

 <\/p>\n

 <\/p>\n

body {<\/strong><\/p>\n

padding: 20px;<\/strong><\/p>\n

font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;<\/strong><\/p>\n

}<\/strong><\/p>\n

span {<\/strong><\/p>\n

border: 1px solid #ccc;<\/strong><\/p>\n

padding: .2em;<\/strong><\/p>\n

border-radius: .2em;<\/strong><\/p>\n

display: inline-flex;<\/strong><\/p>\n

font-weight: bold;<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/h5>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

\u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u06af\u0627\u0644 \u0645\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0627\u0646 \u0637\u0631\u062d \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Grid \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

 <\/p>\n

HTML :<\/h3>\n

 <\/p>\n

<p>You can use Grid also for tiny alignment jobs. <span>Such as aligning this text and icon <img src=”https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/12005\/star.png” alt=”star”> <img src=”https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/12005\/star.png” alt=”star”><\/span> using an inline Grid container.<\/p><\/strong><\/p>\n

 <\/p>\n

CSS :<\/h3>\n

 <\/p>\n

body {<\/strong><\/p>\n

padding: 20px;<\/strong><\/p>\n

font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;<\/strong><\/p>\n

}<\/strong><\/p>\n

span {<\/strong><\/p>\n

border: 1px solid #ccc;<\/strong><\/p>\n

padding: .2em;<\/strong><\/p>\n

border-radius: .2em;<\/strong><\/p>\n

font-weight: bold;<\/strong><\/p>\n

display: inline-grid;<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

grid-auto-flow: column;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 inline-flex \u060c \u0645\u0627\u0646\u0646\u062f \u0631\u0627\u0634\u0644 \u062f\u0631 \u062f\u0645\u0648\u06cc \u062e\u0648\u062f \u060c \u0645\u0646 \u0627\u0632 inline-grid \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645:<\/p>\n

 <\/p>\n

span {<\/strong><\/p>\n

display: inline-grid;<\/strong><\/p>\n

align-items: center;<\/strong><\/p>\n

grid-auto-flow: column;<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u06cc\u06a9\u0648\u0646 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0646\u0648\u0634\u062a\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u062e\u0637 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f Flexbox.<\/p>\n","protected":false},"excerpt":{"rendered":"

\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644 \u062f\u0631 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.   \u0645\u0642\u0627\u06cc\u0633\u0647 Grid \u0648 Flexbox \u0627\u0632 \u0646\u0638\u0631 …<\/p>\n","protected":false},"author":4,"featured_media":3238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[73],"tags":[],"yoast_head":"\n\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627 | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627\" \/>\n<meta property=\"og:description\" content=\"\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644 \u062f\u0631 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.   \u0645\u0642\u0627\u06cc\u0633\u0647 Grid \u0648 Flexbox \u0627\u0632 \u0646\u0638\u0631 …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-07T16:30:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-08T08:32:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp\" \/>\n<meta name=\"twitter:label1\" content=\"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u062f\u0642\u06cc\u0642\u0647\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\",\"name\":\"bagher rezvan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g\",\"caption\":\"bagher rezvan\"},\"logo\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#website\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/\",\"name\":\"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"description\":\"\u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u0634\u0631\u06a9\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"publisher\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rabsana.ir\/tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fa-IR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp\",\"contentUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp\",\"width\":1200,\"height\":360,\"caption\":\"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/\",\"name\":\"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627 | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage\"},\"datePublished\":\"2021-10-07T16:30:12+00:00\",\"dateModified\":\"2021-10-08T08:32:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u062e\u0627\u0646\u0647\",\"item\":\"https:\/\/rabsana.ir\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage\"},\"author\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd\"},\"headline\":\"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627\",\"datePublished\":\"2021-10-07T16:30:12+00:00\",\"dateModified\":\"2021-10-08T08:32:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage\"},\"wordCount\":1365,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\"},\"image\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp\",\"articleSection\":[\"\u0622\u062e\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\"],\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd\",\"name\":\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g\",\"caption\":\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\"},\"url\":\"https:\/\/rabsana.ir\/tutorials\/author\/mahsa-mhmdi\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627 | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/","og_locale":"fa_IR","og_type":"article","og_title":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627","og_description":"\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644 \u062f\u0631 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.   \u0645\u0642\u0627\u06cc\u0633\u0647 Grid \u0648 Flexbox \u0627\u0632 \u0646\u0638\u0631 …","og_url":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/","og_site_name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","article_published_time":"2021-10-07T16:30:12+00:00","article_modified_time":"2021-10-08T08:32:08+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp","twitter_misc":{"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc","\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646":"9 \u062f\u0642\u06cc\u0642\u0647"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Person","Organization"],"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b","name":"bagher rezvan","image":{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo","inLanguage":"fa-IR","url":"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g","caption":"bagher rezvan"},"logo":{"@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo"}},{"@type":"WebSite","@id":"https:\/\/rabsana.ir\/tutorials\/#website","url":"https:\/\/rabsana.ir\/tutorials\/","name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","description":"\u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u0634\u0631\u06a9\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627\u0628\u0633\u0627\u0646\u0627","publisher":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rabsana.ir\/tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fa-IR"},{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage","inLanguage":"fa-IR","url":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp","contentUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp","width":1200,"height":360,"caption":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627"},{"@type":"WebPage","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage","url":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/","name":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627 | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage"},"datePublished":"2021-10-07T16:30:12+00:00","dateModified":"2021-10-08T08:32:08+00:00","breadcrumb":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u062e\u0627\u0646\u0647","item":"https:\/\/rabsana.ir\/tutorials\/"},{"@type":"ListItem","position":2,"name":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627"}]},{"@type":"Article","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#article","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage"},"author":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd"},"headline":"\u0645\u0642\u0627\u06cc\u0633\u0647 Flexbox \u0648 CSS Grid \u0627\u0632 \u0646\u0638\u0631 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u062d\u062a\u0648\u0627","datePublished":"2021-10-07T16:30:12+00:00","dateModified":"2021-10-08T08:32:08+00:00","mainEntityOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#webpage"},"wordCount":1365,"commentCount":0,"publisher":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b"},"image":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#primaryimage"},"thumbnailUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid-1.webp","articleSection":["\u0622\u062e\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631"],"inLanguage":"fa-IR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-rule-and-content\/#respond"]}]},{"@type":"Person","@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd","name":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc","image":{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo","inLanguage":"fa-IR","url":"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g","caption":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc"},"url":"https:\/\/rabsana.ir\/tutorials\/author\/mahsa-mhmdi\/"}]}},"_links":{"self":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3230"}],"collection":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/comments?post=3230"}],"version-history":[{"count":2,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3230\/revisions"}],"predecessor-version":[{"id":3240,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3230\/revisions\/3240"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media\/3238"}],"wp:attachment":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media?parent=3230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/categories?post=3230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/tags?post=3230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}