{"id":3220,"date":"2021-10-06T20:00:50","date_gmt":"2021-10-06T16:30:50","guid":{"rendered":"http:\/\/rabsana.ir\/tutorials\/?p=3220"},"modified":"2021-10-06T17:01:42","modified_gmt":"2021-10-06T13:31:42","slug":"compare-flexbox-and-css-grid-in-terms-of-use-and-layout","status":"publish","type":"post","link":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/","title":{"rendered":"\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"},"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 \u0628\u0631\u0631\u0633\u06cc Flexbox \u0648 CSS Grid<\/a> \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u062f\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0645\u0648\u0631\u062f \u0645\u0646\u0627\u0633\u0628 \u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062a\u0631 \u0627\u0633\u062a. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n

 <\/p>\n

\u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS Grid \u0628\u0631\u0648\u06cc\u0645 \u06cc\u0627 Flexbox \u061f<\/strong><\/h4>\n

 <\/p>\n

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

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

\u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0634\u0645\u0627 \u06a9\u0647 \u0627\u0632 \u0634\u0628\u06a9\u0647 CSS \u0648 flexbox \u0645\u0637\u0644\u0639 \u0647\u0633\u062a\u06cc\u062f\u060c \u0631\u0648\u0634 \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u062a\u0641\u0627\u0648\u062a \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u060c \u062a\u0639\u062f\u0627\u062f\u06cc \u0627\u0632 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u062c\u0627\u0644\u0628 \u0628\u0647 \u062f\u0633\u062a \u0622\u0645\u062f \u06a9\u0647 \u0627\u06a9\u062b\u0631 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0639\u0646\u0648\u0627\u0646 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0631\u062a\u0628 \u06a9\u0631\u062f\u0647 \u0627\u0645.<\/p>\n

 <\/p>\n

Gird \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0622\u0631\u0627\u06cc\u06cc \u0648 Flexbox \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627<\/strong><\/h2>\n

 <\/p>\n

“Grid \u0628\u0631\u0627\u06cc \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0635\u0641\u062d\u0647 \u0648 Flexbox \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627” \u0634\u0627\u06cc\u062f \u0634\u0647\u0648\u062f\u06cc \u062a\u0631\u06cc\u0646 \u067e\u0627\u0633\u062e\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0633 give\u0627\u0644 \u062f\u0627\u062f.<\/p>\n

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

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

\u0627\u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0628\u0627 flexbox \u0647\u0631\u06af\u0632 \u0648\u0627\u0642\u0639\u0627\u064b “\u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631” \u0646\u0628\u0648\u062f\u0647 \u0648 \u0647\u0631\u06af\u0632 \u0628\u062f\u0648\u0646 \u0686\u0646\u062f \u0633\u0631\u062f\u0631\u062f \u0628\u0647 \u0648\u062c\u0648\u062f \u0646\u06cc\u0627\u0645\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u06af\u0631\u06cc\u062f \u060c \u0627\u0632 \u0633\u0648\u06cc \u062f\u06cc\u06af\u0631 \u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u062a\u0648\u0644\u062f \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0627\u06cc\u0646 \u0633 remains\u0627\u0644 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f: \u0622\u06cc\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0628\u0647 \u062f\u0646\u06cc\u0627 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a\u061f<\/p>\n

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

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u062f\u0631 \u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0632\u06cc\u0631 \u060c \u0641\u0631\u0645 \u06cc\u06a9 \u0645\u062d\u0641\u0638\u0647 \u0634\u0628\u06a9\u0647 \u0627\u0633\u062a \u0648 \u0639\u0646\u0627\u0635\u0631 \u0622\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u0647\u0627\u06cc CSS Grid \u0686\u06cc\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

 <\/p>\n

HTML :<\/h5>\n

\n

<form action=”#” class=”form”><\/strong><\/p>\n

<label class=”form-label” for=”email”>Email: <\/label><\/strong><\/p>\n

<input class=”form-input” type=”email” id=”email”><\/strong><\/p>\n

<label class=”form-label” for=”password”>Password: <\/label><\/strong><\/p>\n

<input type=”password” class=”form-input” id=”password”><\/strong><\/p>\n

<button class=”form-btn”>Sign In<\/button><\/strong><\/p>\n

<\/form><\/strong><\/p>\n

\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

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

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

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

\n

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

background-image: url(‘data:image\/svg+xml,%3Csvg width=”42″ height=”44″ viewBox=”0 0 42 44″ xmlns=”http:\/\/www.w3.org\/2000\/svg”%3E%3Cg id=”Page-1″ fill=”none” fill-rule=”evenodd”%3E%3Cg id=”brick-wall” fill=”%239C92AC” fill-opacity=”0.4″%3E%3Cpath d=”M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z”\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E’);<\/strong><\/p>\n

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

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

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

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

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

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

.form-label {<\/strong><\/p>\n

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

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

letter-spacing: 1px;<\/strong><\/p>\n

\n

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

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

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

.form-input {<\/strong><\/p>\n

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

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

\n

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

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

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

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

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

border: none;<\/strong><\/p>\n

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

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

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

transition: background-color 0.3s;<\/strong><\/p>\n

\n

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

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

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

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

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

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

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

@media (min-width: 400px) {<\/strong><\/p>\n

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

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

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

grid-template-columns: auto 1fr;<\/strong><\/p>\n

gap: 2rem;<\/strong><\/p>\n

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

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

.form-label {<\/strong><\/p>\n

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

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

.form-input {<\/strong><\/p>\n

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

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

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

grid-column: span 2;<\/strong><\/p>\n

width: auto;<\/strong><\/p>\n

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

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

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

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/strong><\/p>\n

 <\/p>\n

<\/p>\n

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

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

\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0647 Grid \u062f\u0627\u0631\u062f \u06cc\u06a9 \u0639\u0627\u0645\u0644 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062f\u0631 \u062a\u0635\u0645\u06cc\u0645 \u06af\u06cc\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Flexbox \u06cc\u0627 Grid \u0627\u0633\u062a.<\/p>\n

 <\/p>\n

\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u06cc\u06a9 \u0628\u0639\u062f\u06cc<\/strong><\/h3>\n

 <\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0631\u0627\u0634\u0644 \u0627\u0646\u062f\u0631\u0648 \u062f\u0631 \u0645\u0648\u0636\u0648\u0639 \u062a\u0648\u06cc\u06cc\u062a\u0631 \u0627\u0634\u0627\u0631\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f:<\/p>\n

Flexbox \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u06cc\u06a9 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a. \u06cc\u06a9 \u0631\u062f\u06cc\u0641 \u06cc\u0627 \u06cc\u06a9 \u0633\u062a\u0648\u0646. Grid \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u062f\u0648 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a. \u0633\u0637\u0631 \u0648 \u0633\u062a\u0648\u0646.<\/p>\n

\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0633\u0637\u062d \u0635\u0641\u062d\u0647 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u062c\u0632\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u0628\u06a9\u0647 \u0627\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\n

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

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

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

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

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

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

HTML :<\/strong><\/h5>\n

 <\/p>\n

<h1 class=”page-title”>Grid<\/h1><\/strong><\/p>\n

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

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f\ud83c\udf4f<\/div><\/strong><\/p>\n

<div class=”grid-item”>\ud83c\udf4f\ud83c\udf4f<\/div><\/strong><\/p>\n

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

<h1 class=”page-title”>Flexbox<\/h1><\/strong><\/p>\n

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

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e\ud83c\udf4e<\/div><\/strong><\/p>\n

<div class=”flex-item”>\ud83c\udf4e\ud83c\udf4e<\/div><\/strong><\/p>\n

<\/container><\/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: 2rem;<\/strong><\/p>\n

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

.page-title {<\/strong><\/p>\n

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

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

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

.grid, .flexbox {<\/strong><\/p>\n

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

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

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

.grid-item, .flex-item {<\/strong><\/p>\n

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

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

outline: 2px solid coral;<\/strong><\/p>\n

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

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

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

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

margin-bottom: 60px;<\/strong><\/p>\n

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

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

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

 <\/p>\n

\u062e\u0631\u0648\u062c\u06cc :<\/strong><\/p>\n

 <\/p>\n

<\/p>\n

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

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

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

\u0628\u0627 \u0627\u06cc\u0646 \u0648\u062c\u0648\u062f \u060c \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0641\u0642\u0637 \u0638\u0627\u0647\u0631 \u06cc\u06a9 \u0646\u0648\u0639 Flexbox \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u060c \u0627\u0645\u0627 \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u0631\u0641\u062a\u0627\u0631 \u0630\u0627\u062a\u06cc \u0622\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0646\u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u060c \u0627\u06af\u0631 \u0646\u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0631\u062f\u06cc\u0641 \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u062e\u0637 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f \u060c \u062d\u062a\u0645\u0627\u064b \u0628\u0627 Flexbox \u0628\u0631\u0648\u06cc\u062f.<\/p>\n

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

\u0645\u0646 \u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u0637\u0631\u0641\u062f\u0627\u0631 \u062a\u0641\u0627\u0648\u062a 1D \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 2D \u0634\u0628\u06a9\u0647 \u0648 flexbox \u0646\u06cc\u0633\u062a\u0645 \u060c \u0641\u0642\u0637 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0648\u0632\u0627\u0646\u0647 \u0645\u0646 \u0627\u0632 \u0634\u0628\u06a9\u0647 1D \u0627\u0633\u062a \u0648 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.<\/p>\n

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

 <\/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 \u0628\u0631\u0631\u0633\u06cc Flexbox \u0648 CSS Grid \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u062f\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0645\u0648\u0631\u062f \u0645\u0646\u0627\u0633\u0628 \u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062a\u0631 \u0627\u0633\u062a. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.   \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS Grid \u0628\u0631\u0648\u06cc\u0645 \u06cc\u0627 Flexbox \u061f   \u0628\u0627 \u062f\u0627\u0634\u062a\u0646 \u062f\u0631\u06a9 \u06a9\u0627\u0645\u0644 \u0627\u0632 …<\/p>\n","protected":false},"author":4,"featured_media":3228,"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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627<\/title>\n<meta name=\"description\" content=\"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS\" \/>\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-use-and-layout\/\" \/>\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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc\" \/>\n<meta property=\"og:description\" content=\"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/\" \/>\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-06T16:30:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-06T13:31:42+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.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=\"6 \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-use-and-layout\/#primaryimage\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.webp\",\"contentUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.webp\",\"width\":1200,\"height\":360,\"caption\":\"\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\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#webpage\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/\",\"name\":\"\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 | \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-use-and-layout\/#primaryimage\"},\"datePublished\":\"2021-10-06T16:30:50+00:00\",\"dateModified\":\"2021-10-06T13:31:42+00:00\",\"description\":\"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS\",\"breadcrumb\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc\",\"datePublished\":\"2021-10-06T16:30:50+00:00\",\"dateModified\":\"2021-10-06T13:31:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#webpage\"},\"wordCount\":499,\"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-use-and-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.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-use-and-layout\/#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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","description":"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS","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-use-and-layout\/","og_locale":"fa_IR","og_type":"article","og_title":"\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","og_description":"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS","og_url":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/","og_site_name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","article_published_time":"2021-10-06T16:30:50+00:00","article_modified_time":"2021-10-06T13:31:42+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.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":"6 \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-use-and-layout\/#primaryimage","inLanguage":"fa-IR","url":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.webp","contentUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.webp","width":1200,"height":360,"caption":"\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"},{"@type":"WebPage","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#webpage","url":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/","name":"\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 | \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-use-and-layout\/#primaryimage"},"datePublished":"2021-10-06T16:30:50+00:00","dateModified":"2021-10-06T13:31:42+00:00","description":"\u0628\u0631\u0631\u0633\u06cc \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 CSS Grid \u0648 flexbox \u0627\u0632 \u0646\u0638\u0631 \u0637\u0631\u062d\u0628\u0646\u062f\u06cc \u06cc\u0627 Layout \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0646\u0638\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f HTML \u0648 CSS","breadcrumb":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc"}]},{"@type":"Article","@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#article","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#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 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc","datePublished":"2021-10-06T16:30:50+00:00","dateModified":"2021-10-06T13:31:42+00:00","mainEntityOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/compare-flexbox-and-css-grid-in-terms-of-use-and-layout\/#webpage"},"wordCount":499,"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-use-and-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/Compare-flexbox-and-CSS-Grid.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-use-and-layout\/#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\/3220"}],"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=3220"}],"version-history":[{"count":1,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3220\/revisions"}],"predecessor-version":[{"id":3229,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3220\/revisions\/3229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media\/3228"}],"wp:attachment":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media?parent=3220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/categories?post=3220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/tags?post=3220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}