{"id":3208,"date":"2021-10-05T20:00:49","date_gmt":"2021-10-05T16:30:49","guid":{"rendered":"http:\/\/rabsana.ir\/tutorials\/?p=3208"},"modified":"2021-10-06T10:40:43","modified_gmt":"2021-10-06T07:10:43","slug":"what-is-flexbox-and-css-grid-layout","status":"publish","type":"post","link":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/","title":{"rendered":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout"},"content":{"rendered":"

\u067e\u0633 \u0627\u0632 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 CSS Grid Layout\u060c \u06cc\u06a9 \u0633\u0648\u0627\u0644 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f<\/a>\u060c \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f:<\/p>\n

\u0622\u06cc\u0627 \u0647\u0646\u0648\u0632 \u0627\u0632 Flexbox \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f<\/strong><\/p>\n

Grid \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062a\u0648\u0633\u0637 \u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 Flexbox \u0646\u06cc\u0632 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u0634\u0648\u062f. \u0627\u0645\u0627 \u062f\u0631 \u067e\u0627\u0633\u062e \u0628\u0647 \u0633\u0648\u0627\u0644 \u0628\u0627\u0644\u0627\u060c \u0645\u062b\u0628\u062a \u0627\u0633\u062a. \u0628\u0644\u0647\u060c Flexbox \u0647\u0646\u0648\u0632 \u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 CSS \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0686\u0646\u062f \u0631\u0648\u0634 \u0645\u0648\u062b\u0631 \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 \u0648 \u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Grid \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u0628\u0644\u0647 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u0645.<\/p>\n

 <\/p>\n

Flexbox \u0686\u06cc\u0633\u062a \u061f<\/strong><\/h2>\n

 <\/p>\n

CSS Flexible Box Layout \u06cc\u0627 \u0628\u0647 \u0627\u062e\u062a\u0635\u0627\u0631 Flexbox \u062f\u0631 \u0633\u0627\u0644 2012 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a \u0648 \u067e\u062f\u06cc\u062f \u0622\u0645\u062f. \u0637\u0631\u0627\u062d\u0627\u0646 \u0648 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u06a9\u0647 \u0633\u0627\u0644\u0647\u0627 \u0627\u0632 float \u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0637\u0631\u062d \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0646\u062f\u060c \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0627\u0698\u0648\u0644 \u062c\u062f\u06cc\u062f CSS \u0628\u0627 \u0627\u0634\u062a\u06cc\u0627\u0642 \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646\u062f. \u0627\u06af\u0631\u0686\u0647 \u06a9\u0645\u06cc \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0622\u0646 \u0639\u0627\u062f\u062a \u06a9\u0646\u0646\u062f \u0648 \u0628\u0631 \u0631\u0648\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0622\u0646 \u062a\u0633\u0644\u0637 \u06a9\u0627\u0645\u0644 \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u0646\u062f.<\/p>\n

\u06cc\u06a9 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 flex \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062f\u0631 \u062f\u0627\u06a9\u06cc\u0648\u0645\u0646\u062a CSS \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f:<\/p>\n

 <\/p>\n

.container { display: flex; }<\/strong><\/p>\n

 <\/p>\n

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

\u067e\u06cc\u0686\u06cc\u062f\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 flex \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc\u06cc \u0628\u0627 \u0637\u0648\u0644 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a. \u0628\u0647 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u062f\u0642\u062a \u0648 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

HTML:<\/h5>\n

 <\/p>\n

<header><\/strong><\/p>\n

<h1 class=”page-title”>Flexbox: equal-length columns<\/h1><\/strong><\/p>\n

<\/header><\/strong><\/p>\n

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

<article><\/strong><\/p>\n

<h2 class=”article-title”>Column 1<\/h2><\/strong><\/p>\n

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quam natus unde accusamus iure, facilis tempore veniam dolorem magni mollitia nam assumenda velit deleniti amet et, nostrum dolor quia deserunt.<\/strong><\/p>\n

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

<p>Id nemo velit quisquam praesentium odit? Distinctio harum doloremque similique ex, laborum reiciendis error soluta a laudantium molestiae, quae dolorum illo deleniti doloribus quibusdam sit, ipsam assumenda saepe eveniet? Exercitationem.<\/p><\/strong><\/p>\n

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quam natus unde accusamus iure, facilis tempore veniam dolorem magni mollitia nam assumenda velit deleniti amet et, nostrum dolor quia deserunt.<\/strong><\/p>\n

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

<p>Id nemo velit quisquam praesentium odit? Distinctio harum doloremque similique ex, laborum reiciendis error soluta a laudantium molestiae, quae dolorum illo deleniti doloribus quibusdam sit, ipsam assumenda saepe eveniet? Exercitationem.<\/p><\/strong><\/p>\n

<\/article><\/strong><\/p>\n

<article><\/strong><\/p>\n

<h2 class=”article-title”>Column 2<\/h2><\/strong><\/p>\n

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quam natus unde accusamus iure, facilis tempore veniam dolorem magni mollitia nam assumenda velit deleniti amet et, nostrum dolor quia deserunt.<\/strong><\/p>\n

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

<p>Id nemo velit quisquam praesentium odit? Distinctio harum doloremque similique ex, laborum reiciendis error soluta a laudantium molestiae, quae dolorum illo deleniti doloribus quibusdam sit, ipsam assumenda saepe eveniet? Exercitationem.<\/p><\/strong><\/p>\n

<\/article><\/strong><\/p>\n

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

 <\/p>\n

CSS :<\/h5>\n

 <\/p>\n

\/* general rules *\/<\/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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

outline: 3px solid yellow;<\/strong><\/p>\n

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

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

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

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

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

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

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

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

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

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

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

\n

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

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

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

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

 <\/p>\n

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

 <\/p>\n

<\/p>\n

 <\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u062d\u0648\u0631\u06cc\u062a \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u0648 \u0639\u0645\u0648\u062f\u06cc\u060c \u0628\u0627\u06cc\u062f \u062e\u0637\u0648\u0637 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 flex \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

 <\/p>\n

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

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

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

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

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

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

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

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

 <\/p>\n

\u062f\u0645\u0648 :<\/strong><\/h4>\n

 <\/p>\n

 <\/p>\n

HTML:<\/h5>\n

\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: flex;<\/strong><\/p>\n

justify-content: center;<\/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

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

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

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

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

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

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

align-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 \u062f\u0645\u0648 :<\/strong><\/h5>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

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

 <\/p>\n

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

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

\/* shortcut to specify direction (horizontal) and wrapping behavior *\/<\/strong><\/p>\n

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

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

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

 <\/p>\n

\u00a0CSS Grid Layout \u0686\u06cc\u0633\u062a \u061f<\/strong><\/h2>\n

 <\/p>\n

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

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

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

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

 <\/p>\n

HTML :<\/h5>\n

 <\/p>\n

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

<header class=”header”><\/strong><\/p>\n

<nav class=”nav”><\/strong><\/p>\n

<ul class=”nav-list”><\/strong><\/p>\n

<li class=”nav-item logo”><a href=”#” class=”nav-link”><svg 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><\/a><\/li><\/strong><\/p>\n

<li class=”nav-item”><a href=”#” class=”nav-link”>Magazine<\/a><\/li><\/strong><\/p>\n

<li class=”nav-item”><a href=”#” class=”nav-link”>Merchandise<\/a><\/li><\/strong><\/p>\n

<li class=”nav-item”><a href=”#” class=”nav-link”>The Team<\/a><\/li><\/strong><\/p>\n

<li class=”nav-item”><a href=”#” class=”nav-link”>Contact Us<\/a><\/li><\/strong><\/p>\n

<\/ul><\/strong><\/p>\n

<\/nav><\/strong><\/p>\n

<\/header><\/strong><\/p>\n

<div class=”big-kittie”><\/strong><\/p>\n

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

<main class=”main”><\/strong><\/p>\n

<h1 class=”main-title”>The Cats <br> <span class=”space-1″>Will <\/span> <br> <span class=”space-2″>Know<\/span><\/h1><\/strong><\/p>\n

<p class=”main-paragraph”>Rain will fall again on your smooth pavement, a light rain like a breath or a step. The breeze and the dawn will flourish again<\/strong><\/p>\n

when you return, as if beneath your step. Between flowers and sills the cats will know.(https:\/\/www.poetryfoundation.org\/poems\/51514\/the-cats-will-know)<\/strong><\/p>\n

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

<\/main><\/strong><\/p>\n

<section class=”kittie”><\/strong><\/p>\n

<\/section><\/strong><\/p>\n

<section class=”verse”><\/strong><\/p>\n

<p class=”verse-para”>Winter. Time to eat fat and watch hockey. In the pewter mornings, the cat,<\/strong><\/p>\n

a black fur sausage with yellow Houdini eyes, jumps up on the bed and tries to get onto my head. (https:\/\/www.poetryfoundation.org\/poems\/47787\/february-56d2288025b1e)<\/p><\/strong><\/p>\n

<\/section><\/strong><\/p>\n

<footer class=”footer”><\/strong><\/p>\n

<p class=”footer-para”>Made with \u2764\ufe0f\u2764\ufe0f\u2764\ufe0f by Maria Antonietta<\/p><\/strong><\/p>\n

<\/footer><\/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

background: linear-gradient(90deg, rgba(153,98,189,1) 50%, rgba(251,203,71,1) 50%);<\/strong><\/p>\n

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

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

list-style: none;<\/strong><\/p>\n

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

\/* header part *\/<\/strong><\/p>\n

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

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

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

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

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

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

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

.nav-list {<\/strong><\/p>\n

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

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

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

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

opacity: 0.8;<\/strong><\/p>\n

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

.nav-item {<\/strong><\/p>\n

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

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

.logo a svg {<\/strong><\/p>\n

transform: rotate(-10deg);<\/strong><\/p>\n

transition: all 0.2s;<\/strong><\/p>\n

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

.logo a:hover svg,<\/strong><\/p>\n

.logo a:focus svg {<\/strong><\/p>\n

transform: rotate(0deg);<\/strong><\/p>\n

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

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

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

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

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

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

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

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

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

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

.big-kittie {<\/strong><\/p>\n

background-image: url(“https:\/\/images.unsplash.com\/photo-1500603720222-eb7a1f997356?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzI0MTk3OQ&ixlib=rb-1.2.1&q=85”);<\/strong><\/p>\n

background-repeat: no-repeat;<\/strong><\/p>\n

background-position: center center;<\/strong><\/p>\n

background-size: cover;<\/strong><\/p>\n

min-height: 300px;<\/strong><\/p>\n

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

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

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

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

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

opacity: 0.8;<\/strong><\/p>\n

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

.main-title {<\/strong><\/h6>\n

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

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

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

.main-paragraph {<\/strong><\/p>\n

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

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

.space-1 {<\/strong><\/p>\n

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

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

.space-2 {<\/strong><\/p>\n

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

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

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

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

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

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

.verse-para {<\/strong><\/p>\n

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

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

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

background-image: url(“https:\/\/images.unsplash.com\/photo-1592194996308-7b43878e84a6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyNzI1MzM5MA&ixlib=rb-1.2.1&q=85”);<\/strong><\/p>\n

background-repeat: no-repeat;<\/strong><\/p>\n

background-position: center center;<\/strong><\/p>\n

background-size: cover;<\/strong><\/p>\n

min-height: 500px;<\/strong><\/p>\n

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

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

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

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

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

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

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

\/* media queries *\/<\/strong><\/p>\n

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

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

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

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

grid-template-rows: 1fr 4fr 3fr 2fr;<\/strong><\/p>\n

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

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

grid-area: 1 \/ 2 \/ 2 \/ 3;<\/strong><\/p>\n

z-index: 1;<\/strong><\/p>\n

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

padding-bottom: 100%;<\/strong><\/p>\n

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

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

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

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

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

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

.nav-list {<\/strong><\/p>\n

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

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

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

.big-kittie {<\/strong><\/p>\n

grid-area: 1 \/ 3 \/ 5 \/ 5;<\/strong><\/p>\n

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

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

\/* row start, row end, col start col end *\/<\/strong><\/p>\n

grid-area: 1 \/ 1 \/ 3 \/ 2;<\/strong><\/p>\n

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

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

grid-area: 3 \/ 1 \/ 4 \/ 2;<\/strong><\/p>\n

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

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

grid-area: 3 \/ 2 \/ 4 \/ 3;<\/strong><\/p>\n

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

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

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

grid-area: 4 \/ 1 \/ 5 \/ 3;<\/strong><\/p>\n

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

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

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

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

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

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

grid-area: 1 \/ 4 \/ 4 \/ -1;<\/strong><\/p>\n

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

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

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

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

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

opacity: 0.8;<\/strong><\/p>\n

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

.nav-list {<\/strong><\/p>\n

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

opacity: 0.8;<\/strong><\/p>\n

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

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

\/* row start, row end, col start col end *\/<\/strong><\/p>\n

grid-area: 1 \/ 1 \/ 3 \/ 3;<\/strong><\/p>\n

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

.main-paragraph {<\/strong><\/p>\n

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

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

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

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

min-height: 200px;<\/strong><\/p>\n

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

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

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

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

grid-area: 1 \/ 3 \/ 2 \/ -1;<\/strong><\/p>\n

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

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

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

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

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

.nav-list {<\/strong><\/p>\n

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

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

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

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

.nav-item {<\/strong><\/p>\n

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

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

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

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

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

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

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

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

.header svg {<\/strong><\/p>\n

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

height: 50px;<\/strong><\/p>\n

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

.big-kittie {<\/strong><\/p>\n

grid-area: 2 \/ 3 \/ 5 \/ -1;<\/strong><\/p>\n

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

.main-paragraph {<\/strong><\/p>\n

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

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

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

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

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

.verse-para {<\/strong><\/p>\n

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

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

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

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

 <\/p>\n

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

 <\/p>\n

<\/p>\n

 <\/p>\n

\u062f\u0631 \u062f\u0645\u0648 \u0628\u0627\u0644\u0627\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0628\u06a9\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0635\u0641\u062d\u0647 \u062f\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0645\u0644\u060c div \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 grid container<\/em> \u062a\u0628\u062f\u06cc\u0644 \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0633\u0637\u0631\u0647\u0627 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645:<\/p>\n

 <\/p>\n

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

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

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

grid-template-rows: 1fr 4fr 3fr 2fr;<\/strong><\/p>\n

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

 <\/p>\n

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

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

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

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

\u0686\u0646\u062f \u0631\u0648\u0634 \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u062f\u0631 \u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0628\u0627\u0644\u0627 \u060c \u0645\u0646 \u0627\u0632 \u0634\u0645\u0627\u0631\u0647 \u062e\u0637\u0648\u0637 \u0634\u0628\u06a9\u0647 \u0648 \u0648\u06cc\u0698\u06af\u06cc grid-area \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062e\u0637 \u06a9\u062f \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u06a9\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u0637\u0627\u0644\u0628 \u0627\u0635\u0644\u06cc \u0645\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

 <\/p>\n

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

\/* row start, row end, col start col end *\/<\/strong><\/p>\n

grid-area: 1 \/ 1 \/ 3 \/ 3;<\/strong><\/p>\n

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

 <\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0647\u0645\u0647 \u0628\u062e\u0634 \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0634\u0628\u06a9\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f \u060c \u062e\u0631\u0648\u062c\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n

 <\/p>\n

\"\u0645\u062b\u0627\u0644-<\/p>\n","protected":false},"excerpt":{"rendered":"

\u067e\u0633 \u0627\u0632 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 CSS Grid Layout\u060c \u06cc\u06a9 \u0633\u0648\u0627\u0644 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f\u060c \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f: \u0622\u06cc\u0627 \u0647\u0646\u0648\u0632 \u0627\u0632 Flexbox \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f Grid \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062a\u0648\u0633\u0637 \u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 Flexbox \u0646\u06cc\u0632 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u0634\u0648\u062f. \u0627\u0645\u0627 \u062f\u0631 \u067e\u0627\u0633\u062e \u0628\u0647 \u0633\u0648\u0627\u0644 \u0628\u0627\u0644\u0627\u060c \u0645\u062b\u0628\u062a \u0627\u0633\u062a. \u0628\u0644\u0647\u060c Flexbox \u0647\u0646\u0648\u0632 \u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 CSS …<\/p>\n","protected":false},"author":4,"featured_media":3213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[73],"tags":[],"yoast_head":"\n\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout - \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627<\/title>\n<meta name=\"description\" content=\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\u0627\" \/>\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\/what-is-flexbox-and-css-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout\" \/>\n<meta property=\"og:description\" content=\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\u0627\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-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-05T16:30:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-06T07:10:43+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\/what-is-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=\"10 \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\/what-is-flexbox-and-css-grid-layout\/#primaryimage\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-Flexbox-And-CSS-Grid.webp\",\"contentUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-Flexbox-And-CSS-Grid.webp\",\"width\":1200,\"height\":360,\"caption\":\"\u0645\u0646\u0638\u0648\u0631 \u0627\u0632 Flexbox \u0648 CSS Grid \u0686\u06cc\u0633\u062a\u061f\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/\",\"name\":\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout - \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f | \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\/what-is-flexbox-and-css-grid-layout\/#primaryimage\"},\"datePublished\":\"2021-10-05T16:30:49+00:00\",\"dateModified\":\"2021-10-06T07:10:43+00:00\",\"description\":\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\u0627\",\"breadcrumb\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u062e\u0627\u0646\u0647\",\"item\":\"https:\/\/rabsana.ir\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage\"},\"author\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd\"},\"headline\":\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout\",\"datePublished\":\"2021-10-05T16:30:49+00:00\",\"dateModified\":\"2021-10-06T07:10:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage\"},\"wordCount\":1487,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\"},\"image\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-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\/what-is-flexbox-and-css-grid-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":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout - \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","description":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\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\/what-is-flexbox-and-css-grid-layout\/","og_locale":"fa_IR","og_type":"article","og_title":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout","og_description":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\u0627","og_url":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/","og_site_name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","article_published_time":"2021-10-05T16:30:49+00:00","article_modified_time":"2021-10-06T07:10:43+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-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":"10 \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\/what-is-flexbox-and-css-grid-layout\/#primaryimage","inLanguage":"fa-IR","url":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-Flexbox-And-CSS-Grid.webp","contentUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-Flexbox-And-CSS-Grid.webp","width":1200,"height":360,"caption":"\u0645\u0646\u0638\u0648\u0631 \u0627\u0632 Flexbox \u0648 CSS Grid \u0686\u06cc\u0633\u062a\u061f"},{"@type":"WebPage","@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage","url":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/","name":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout - \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f | \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\/what-is-flexbox-and-css-grid-layout\/#primaryimage"},"datePublished":"2021-10-05T16:30:49+00:00","dateModified":"2021-10-06T07:10:43+00:00","description":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 Flexbox \u0648 CSS Grid Layout \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u06a9\u0647 \u06a9\u062f \u0647\u0627\u06cc HTML \u0648 CSS\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0645\u0648 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0622\u0646\u0647\u0627","breadcrumb":{"@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u062e\u0627\u0646\u0647","item":"https:\/\/rabsana.ir\/tutorials\/"},{"@type":"ListItem","position":2,"name":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout"}]},{"@type":"Article","@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#article","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage"},"author":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd"},"headline":"\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u0644 Flexbox \u0648 CSS Grid layout","datePublished":"2021-10-05T16:30:49+00:00","dateModified":"2021-10-06T07:10:43+00:00","mainEntityOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#webpage"},"wordCount":1487,"commentCount":0,"publisher":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b"},"image":{"@id":"https:\/\/rabsana.ir\/tutorials\/what-is-flexbox-and-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/10\/what-is-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\/what-is-flexbox-and-css-grid-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\/3208"}],"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=3208"}],"version-history":[{"count":1,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3208\/revisions"}],"predecessor-version":[{"id":3214,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3208\/revisions\/3214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media\/3213"}],"wp:attachment":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media?parent=3208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/categories?post=3208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/tags?post=3208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}