راهنمای تعاملی برای شبکه CSS • جاش دبلیو کومئو

table>
  tbody>
    
    tr>
      
      td>td>
      td>td>
      td>td>
    tr>

    
    tr>
      
      td>td>
      td>td>
      td>td>
    tr>
  tbody>
table>

برخلاف طرح بندی جدول، CSS Grid به ما اجازه می دهد که طرح بندی را به طور کامل از CSS کنترل کنیم. می‌توانیم ظرف را هر طور که دوست داریم برش دهیم و محفظه‌هایی ایجاد کنیم که بچه‌های شبکه‌ای ما بتوانند از آن به عنوان لنگر استفاده کنند.

حالت طرح بندی شبکه ای را با انتخاب می کنیم display دارایی:

.wrapper {
  display: grid;
}

به‌طور پیش‌فرض، CSS Grid از یک ستون استفاده می‌کند و ردیف‌هایی را بر اساس تعداد فرزندان ایجاد می‌کند. این به عنوان شناخته شده است شبکه ضمنی، همانطور که ما به صراحت هیچ ساختاری را تعریف نمی کنیم.

در اینجا نحوه انجام آن آمده است:

شبکه های ضمنی پویا هستند. ردیف ها بر اساس تعداد فرزندان اضافه و حذف خواهند شد. هر کودکی نوبت خودش را می‌گیرد.

به طور پیش فرض، ارتفاع شبکه والد توسط فرزندان آن تعیین می شود. به صورت پویا رشد می کند و کوچک می شود. جالب اینجاست که این حتی یک چیز “شبکه CSS” نیست. شبکه پدر و مادر همچنان از طرح‌بندی Flow استفاده می‌کند و عناصر بلوک در طرح‌بندی Flow به صورت عمودی رشد می‌کنند تا محتوای خود را در بر گیرند. فقط در کودکان با استفاده از یک طرح شبکه مرتب شده اند.

اما اگر به شبکه یک ارتفاع ثابت بدهیم چه؟ در این مورد، سطح کل به ردیف هایی با اندازه مساوی تقسیم می شود:

به طور پیش فرض، CSS Grid یک طرح بندی ستونی ایجاد می کند. می توانیم با استفاده از ستون ها را مشخص کنیم grid-template-columns دارایی:

style>
  .parent {
    display: grid;
    grid-template-columns: 25% 75%;
  }
style>
div class="parent">
  div class="child">1div>
  div class="child">2div>
div>

با عبور از دو مقدار از grid-template-columns، 25% و 75%، به الگوریتم CSS Grid می گویم که عنصر را به دو ستون تقسیم کند.

ستون ها را می توان با استفاده از هر CSS معتبر تعریف کرد ارزش(در برگه جدید باز می شود)از جمله پیکسل ها، رم ها، واحدهای پنجره، و غیره. ما همچنین به یک واحد جدید دسترسی پیدا می کنیم fr واحد:

style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
style>
div class="parent">
  div class="child">1div>
  div class="child">2div>
div>

fr به معنای “جناح” است. در این مثال می گوییم که ستون اول باید 1 واحد فضا اشغال کند در حالی که ستون دوم باید 3 واحد فضا را اشغال کند. این یعنی در مجموع 4 واحد فضا وجود دارد و این مخرج می شود. ستون اول ¼ از فضای موجود را می خورد در حالی که ستون دوم ¾ را مصرف می کند.

این fr واحد انعطاف پذیری به سبک Flexbox را به CSS Grid می آورد. درصد و مقادیر ایجاد محدودیت های سخت در حالی که fr ستون‌ها آزادانه رشد می‌کنند و در صورت نیاز کوچک می‌شوند تا محتویات خود را در بر گیرند.

سعی کنید این ظرف را کوچک کنید تا تفاوت را ببینید:

در این سناریو، ستون اول ما دارای یک شبح کرکی است که عرض آن 55 پیکسل است. اما اگر ستون برای جا دادن آن خیلی کوچک باشد چه؟

• ستون های بر اساس درصد جامد هستند، بنابراین تصویر شبح ما خواهد بود سرریز، از ستون بیرون می ریزد.

• frستون‌های مبتنی بر منعطف هستند و بنابراین ستون از حداقل اندازه محتوای خود کوچک نمی‌شود، حتی اگر به معنای شکستن نسبت‌ها باشد.

به طور دقیق تر: در fr واحد توزیع می کند اضافی فضا ابتدا عرض ستون ها بر اساس محتوای آنها محاسبه می شود. در صورت باقی ماندن فضا بر اساس تخصیص داده می شود fr ارزش ها این بسیار شبیه است flex-growهمانطور که در راهنمای تعاملی Flexbox من بحث شده است.

به طور کلی، این انعطاف پذیری چیز خوبی است. درصدها خیلی سخت است.

ما می توانیم یک مثال کامل از این را با gap. gap یک ویژگی CSS جادویی است که مقدار ثابتی فاصله بین تمام ستون‌ها و ردیف‌ها در شبکه ما اضافه می‌کند.

ببینید وقتی بین درصدها و کسرها جابه جا می شویم چه اتفاقی می افتد:

توجه داشته باشید که چگونه هنگام استفاده از ستون‌های مبتنی بر درصد، محتوا از شبکه اصلی خارج می‌شود؟ این اتفاق می افتد زیرا درصدها با استفاده از محاسبه می شوند کل منطقه شبکه این دو ستون 100٪ از محتوای اصلی را اشغال می کنند و اجازه کوچک شدن ندارند. وقتی 16 پیکسل اضافه می کنیم gap، ستون ها چاره ای جز ریختن به بیرون از ظرف ندارند.

این fr واحد، برعکس، بر اساس محاسبه می شود اضافی فضا در این مورد، فضای اضافی برای 16 پیکسل کاهش می یابد gap. الگوریتم CSS Grid فضای باقی مانده را بین دو ستون شبکه توزیع می کند.

پیوند به این عنوانخطوط ضمنی و آشکار

اگر بیش از دو فرزند را به یک شبکه دو ستونی اضافه کنیم چه اتفاقی می افتد؟

خوب بیایید سعی کنیم:

style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
style>
div class="parent">
  div class="child">1div>
  div class="child">2div>
  div class="child">3div>
div>

جالب شبکه ما یک ردیف دوم می گیرد. الگوریتم شبکه می‌خواهد اطمینان حاصل کند که هر کودک سلول شبکه خود را دارد. در صورت نیاز برای دستیابی به این هدف، ردیف های جدیدی ایجاد می کند. این در شرایطی مفید است که ما تعداد متغیری از عناصر داریم (مثلاً یک شبکه عکس) و می خواهیم شبکه به طور خودکار گسترش یابد.

با این حال، در موقعیت‌های دیگر، می‌خواهیم ردیف‌ها را به صراحت تعریف کنیم تا یک طرح‌بندی خاص ایجاد کنیم. ما می توانیم این کار را با grid-template-rows دارایی:

style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 5rem 1fr;
  }
style>
div class="parent">
  div class="child">div>
  div class="child">div>
  div class="child">div>
  div class="child">div>
div>

با تعریف هر دو grid-template-rows و grid-template-columns، ما یک شبکه صریح ایجاد کردیم. این برای ساختن طرح‌بندی‌های صفحه‌ای مانند این است ” جام مقدس “?این نامی بود که به رایج‌ترین طرح‌بندی در روزهای اولیه وب داده می‌شد: هدر، نوار کناری، منطقه محتوای اصلی و پاورقی. طرح بندی در بالای این آموزش.

پیوند به این عنواندستیار تکرار

فرض کنید در حال ساخت یک تقویم هستیم:

CSS Grid یک ابزار فوق العاده برای چنین مواردی است. می‌توانیم آن را به‌صورت شبکه‌ای با ۷ ستون، که هر ستون ۱ واحد فضا اشغال می‌کند، ساختار دهیم:

.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

این کار می کند، اما شمارش هر یک کمی خسته کننده است 1fr‘s تصور کنید اگر 50 ستون داشتیم!

خوشبختانه راه بهتری برای حل این مشکل وجود دارد:

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

این repeat کپی/پیست را برای ما انجام خواهد داد. ما می گوییم 7 ستون می خواهیم که هر کدام هستند 1fr گسترده

اگر کنجکاو هستید، این زمین بازی است که کد کامل را نشان می دهد:

style>
  .calendar {
    display: grid;
    grid-template-columns:
      repeat(7, 1fr);
    gap: 4px;
  }
style>
ol class="calendar">
  li class="day">1li>
  li class="day">2li>
  li class="day">3li>
  li class="day">4li>
  li class="day">5li>
  li class="day">6li>
  li class="day">7li>
  li class="day">8li>
  li class="day">9li>
  li class="day">10li>
  li class="day">11li>
  li class="day">12li>
  li class="day">13li>
  li class="day">14li>
  li class="day">15li>
  li class="day">16li>
  li class="day">17li>
  li class="day">18li>
  li class="day">19li>
  li class="day">20li>
  li class="day">21li>
  li class="day">22li>
  li class="day">23li>
  li class="day">24li>
  li class="day">25li>
  li class="day">26li>
  li class="day">27li>
  li class="day">28li>
  li class="day">29li>
  li class="day">30li>
  li class="day">31li>
ol>

به‌طور پیش‌فرض، الگوریتم CSS Grid، هر کودک را به اولین سلول خالی شبکه اختصاص می‌دهد، مشابه نحوه کاشی کاری یک خرده‌فروش کف حمام.

اما نکته جالب اینجاست: ما می توانیم عناصر خود را به هر سلولی که بخواهیم اختصاص دهیم! کودکان حتی می توانند چندین ردیف/ستون را بپوشانند.

در اینجا یک نسخه ی نمایشی تعاملی است که نشان می دهد چگونه این کار می کند. کلیک کنید/فشار دهید و بکشید قرار دادن کودک در شبکه*اگر از اشاره گر مانند ماوس یا صفحه لمسی استفاده نمی کنید، کنترل های مبتنی بر صفحه کلید نیز ارائه می شوند. برای اطلاعات بیشتر به صفحه راهنمای زیر مراجعه کنید.:

.parent {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-template-rows:
    repeat(4, 1fr);
}

.child {
  

}

این grid-row و grid-column ویژگی‌ها به ما اجازه می‌دهند تا مشخص کنیم که شبکه فرزند ما باید کدام مسیر را اشغال کند. اگر بخواهیم فرزند یک سطر یا ستون را اشغال کند، می توانیم آن را با شماره آن مشخص کنیم. grid-column: 3 کودک را تعیین می کند که در ستون سوم بنشیند.

کودکان شبکه همچنین می توانند چندین ردیف/ستون را بپوشانند. نحو برای این کار از یک اسلش برای محدود کردن شروع و پایان استفاده می کند:

.child {
  grid-column: 1 / 4;
}

در نگاه اول، این مانند یک کسری به نظر می رسد، ¼. با این حال، در CSS از اسلش برای جداسازی استفاده نمی شود، از آن برای جداسازی گروه های مقادیر استفاده می شود. در این مورد، به ما اجازه می دهد که ستون های شروع و پایان را در یک اعلان واحد تنظیم کنیم.

این اساسا کوتاه است برای:

.child {
  grid-column-start: 1;
  grid-column-end: 4;
}

یک باگ یواشکی اینجا وجود دارد: اعدادی که ارائه می دهیم بر اساس ستون هستند خطوط، نه شاخص های ستون.

درک این خطا با یک نمودار ساده تر خواهد بود:

به طور گیج کننده، شبکه 4 ستونی در واقع دارد 5 خطوط ستون وقتی کودکی را به شبکه خود اختصاص می دهیم، آن را با استفاده از این خطوط لنگر می زنیم. اگر بخواهیم فرزندمان 3 ستون اول را بپوشاند، باید از سطر 1 شروع و به سطر 4 ختم شود.

پیوند به این عنوانپوشا چندین ردیف / ستون

در مثال های بالا استفاده کردیم grid-column و grid-row برای انتخاب یک مکان خاص برای شبکه وابسته ما. این زمانی مفید است که دقیقاً بدانیم فرزندمان باید کجا بنشیند، اما در مواقع دیگر می خواهیم همه چیز کمی پویاتر باشد.

به عنوان مثال، شاید ما می خواهیم فرزندانمان در شبکه به طور طبیعی شبکه را پر کنند، اما ما می خواهیم تعیین شده است شبکه های فرزند برای پوشاندن چندین ستون:

در این مثال، بیشتر عناصر فرزند شبکه (که با کادرهای خاکستری نشان داده می شوند) در یک سلول شبکه قرار دارند، اما ما می خواهیم صفت کودکان (که با جعبه‌های زرد نشان داده می‌شوند) به عرض دو برابر، در عرض دو ستون ها

ما توانست با دادن یک تکلیف ستون/ردیف خاص به هر کودک این مشکل را حل کنید، اما این کار بسیار خسته کننده به نظر می رسد، به خصوص اگر شبکه از داده های پویا تولید شده باشد! در عوض، ما می توانیم از ویژه استفاده کنیم span کلیدواژه فرزند برجسته:

در کلیپ بورد کپی کنید

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.featured.child {
  grid-column: span 2;
}

اینجا یک زمین بازی قابل ویرایش زنده است که این قابلیت را نشان می دهد:

کد زمین بازی

کد را با استفاده از Prettier فرمت کنید

HTMLCSS

روی ویرایشگر تمرکز کنید. این فوکوس را تا زمانی که Escape را فشار دهید حفظ می کند.ویرایشگر کد:

style>
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .featured.child {
    grid-column: span 2;
  }
style>
div class="grid">
  div class="child">div>
  div class="child">div>
  div class="featured child">div>
  div class="child">div>
  div class="featured child">div>
  div class="child">div>
  div class="child">div>
div>

</p> <p>

تغییر اندازه ویرایشگر از فلش های چپ/راست استفاده کنید.

نتیجه

پانل نتایج را بازخوانی کنید

پیوند به این عنوانمناطق شبکه

خوب، وقت آن است که در مورد یکی از جالب ترین بخش های CSS Grid صحبت کنیم. 😄

فرض کنید این طرح را می سازیم:

با استفاده از آنچه تاکنون آموخته ایم، می توانیم ساختار آن را به این صورت انجام دهیم:

در کلیپ بورد کپی کنید

.grid {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}
.header {
  grid-column: 2;
  grid-row: 1;
}
.main {
  grid-column: 2;
  grid-row: 2;
}

این کار می کند، اما روش ارگونومیک تری برای انجام این کار وجود دارد: مناطق شبکه

در اینجا به نظر می رسد:

مانند قبل ساختار شبکه را با تعریف می کنیم grid-template-columns و grid-template-rows. اما پس از آن ما این جمله عجیب را داریم:

در کلیپ بورد کپی کنید

.parent {
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

در اینجا نحوه انجام آن آمده است: ما شبکه‌ای را که می‌خواهیم ایجاد کنیم، ترسیم می‌کنیم، تقریباً طوری که انگار در حال ساختن هستیم هنر اسکی?هنر ایجاد شده از شخصیت های تایپوگرافی. محبوب در روزهای محاسبات خط فرمان.. هر خط نشان دهنده یک ردیف است و هر کلمه نامی است که ما به یک برش خاص از شبکه می دهیم. آیا می توانید به صورت بصری ببینید که وب چگونه به نظر می رسد؟

سپس، به جای تعیین یک کودک با grid-column و grid-row، آن را اختصاص می دهیم grid-area!

وقتی می‌خواهیم ناحیه خاصی در چندین سطر یا ستون باشد، می‌توانیم نام آن ناحیه را در قالب خود تکرار کنیم. در این مثال، ناحیه “سایدبار” هر دو خط را در بر می گیرد، بنابراین ما می نویسیم sidebar برای دو سلول در ستون اول.

آیا باید از محدوده استفاده کنیم یا سطر/ستون؟ هنگام ساختن طرح‌بندی‌های واضح مانند این، من واقعاً دوست دارم از مناطق استفاده کنم. این به من امکان می دهد به جای استفاده از اعداد سطر/ستون غیرقابل کشف، به تکالیف شبکه خود معنای معنایی بدهم. با این حال، مناطق زمانی بهترین عملکرد را دارند که شبکه دارای تعداد ثابتی از ردیف‌ها و ستون‌ها باشد. grid-column و grid-row می تواند برای شبکه های ضمنی مفید باشد.

پیوند به این عنوانتوجه کاربران صفحه کلید

در مورد تخصیص شبکه یک اشکال بزرگ وجود دارد: ترتیب برگه همچنان بر اساس خواهد بود موقعیت DOM، موقعیت شبکه نیست

توضیح آن با یک مثال ساده تر خواهد بود. در این زمین بازی من یک گروه از دکمه ها ایجاد کردم و آنها را با CSS Grid مرتب کردم:

کد زمین بازی

کد را با استفاده از Prettier فرمت کنید

HTMLCSS

روی ویرایشگر تمرکز کنید. این فوکوس را تا زمانی که Escape را فشار دهید حفظ می کند.ویرایشگر کد:

div class="wrapper">
  button class="btn one">
    One
  button>
  button class="btn four">
    Four
  button>
  button class="btn six">
    Six
  button>
  button class="btn two">
    Two
  button>
  button class="btn five">
    Five
  button>
  button class="btn three">
    Three
  button>
div>

</p> <p> <button class=""btn" one=""></p> <p> یکی<br /> </button><br /> <button class=""btn" four=""></p> <p> چهار<br /> </button><br /> <button class=""btn" six=""></p> <p> شش<br /> </button><br /> <button class=""btn" two=""></p> <p> دو<br /> </button><br /> <button class=""btn" five=""></p> <p> جمعه<br /> </button><br /> <button class=""btn" three=""></p> <p> سه<br /> </button> </p> <p>

تغییر اندازه ویرایشگر از فلش های چپ/راست استفاده کنید.

نتیجه

پانل نتایج را بازخوانی کنید

در پانل RESULT، دکمه ها مرتب شده اند. با خواندن از چپ به راست و از بالا به پایین، از یک به شش می رویم.

اگر از دستگاهی با صفحه کلید استفاده می کنید، سعی کنید از طریق این دکمه ها استفاده کنید. می توانید این کار را با کلیک بر روی دکمه اول در گوشه سمت چپ بالا (“One”) انجام دهید و سپس فشار دهید Tab برای قدم گذاشتن در میان دکمه ها یکی یکی.

شما باید چیزی شبیه به این را ببینید:

طرح فوکوس بدون قافیه یا دلیل از دیدگاه کاربر در اطراف صفحه می پرد. این اتفاق می‌افتد زیرا دکمه‌ها بر اساس ترتیبی که در DOM ظاهر می‌شوند، فوکوس می‌کنند.

برای رفع این مشکل، باید فرزندان شبکه را در DOM دوباره مرتب کنیم تا با ترتیب بصری مطابقت داشته باشند تا بتوانم از چپ به راست و از بالا به پایین پیمایش کنم.*این حتی برای زبان های راست به چپ مانند عربی و عبری نیز به درستی کار می کند. ستون‌های CSS Grid در این زبان‌ها منعکس می‌شوند و ستون 1 به جای سمت چپ در سمت راست قرار دارد. بنابراین، همان ترتیب DOM برای همه زبان ها کار می کند.

در تمام نمونه‌هایی که تاکنون دیده‌ایم، ستون‌ها و ردیف‌های ما کشیده می‌شوند تا کل ظرف شبکه را پر کنند. با این حال، لازم نیست این مورد باشد!

برای مثال، فرض کنید دو ستون را تعریف می کنیم که هر کدام 90 پیکسل عرض دارند. تا زمانی که والد شبکه بزرگتر از 180 پیکسل باشد، در انتها فضای مرده وجود خواهد داشت:

ما می توانیم توزیع ستون ها را با استفاده از justify-content دارایی:

توجیه-محتوا:

شروع کنیدمرکزپایانفاصله بینفضای اطرافیکنواخت فضا

اگر با الگوریتم طرح بندی Flexbox آشنا هستید، احتمالاً این الگوریتم بسیار آشنا به نظر می رسد. CSS Grid بر اساس ویژگی‌های هم‌ترازی که برای اولین بار با Flexbox معرفی شد، ساخته می‌شود و آنها را حتی فراتر می‌برد.

تفاوت بزرگ این است که ما همسو می شویم ستون ها، نه خود عناصر. اساسا، justify-content به ما این امکان را می دهد که بخش های شبکه خود را مرتب کنیم و آنها را همانطور که می خواهیم در سراسر شبکه توزیع کنیم.

اگر بخواهیم خود عناصر را تراز کنیم در داخل ستون های آنها را می توانیم استفاده کنیم justify-items دارایی:

توجیه-محتوا:

راه اندازی (پیش فرض)مرکزپایانفاصله بینفضای اطرافیکنواخت فضا

justify-اقلام:

کشش (پیش فرض)شروع کنیدمرکزپایان

وقتی یک گره DOM را در یک شبکه والد قرار می‌دهیم، رفتار پیش‌فرض این است که کل آن ستون را بپوشاند، درست مانند

in Flow layout will stretch horizontally to fill its container. With justify-items، اما ما می توانیم این رفتار را تغییر دهیم.

این مفید است زیرا به ما اجازه می دهد تا از تقارن سفت و سخت ستون ها رهایی پیدا کنیم. وقتی تنظیم کردیم justify-items به چیزی غیر از stretch، طبق محتوای آنها، کودکان به عرض پیش فرض خود کوچک می شوند. در نتیجه، عناصر در یک ستون می توانند دارای عرض های متفاوت باشند.

ما حتی می توانیم تراز a را کنترل کنیم خاص کودک شبکه با استفاده از justify-self دارایی:

توجیه-محتوا:

راه اندازی (پیش فرض)مرکزپایانفاصله بینفضای اطرافیکنواخت فضا

من خودم را معذورم:

کشش (پیش فرض)شروع کنیدمرکزپایان

بر خلاف justify-items، که روی مش والد تنظیم می شود و تراز کردن را کنترل می کند همه کودکان شبکه، justify-self از کودک خواسته می شود. می توانیم فکر کنیم justify-items به عنوان راهی برای تنظیم یک مقدار پیش فرض برای justify-self به همه کودکان در شبکه

پیوند به این عنوانتراز خط

تا اینجا ما در مورد نحوه چیدمان چیزها در آن صحبت کرده ایم افقی جهت CSS Grid مجموعه ای از ویژگی های اضافی را برای تراز کردن چیزها فراهم می کند عمودی جهت:

توجیه-محتوا:

شروع کنیدمرکزپایانفاصله بینفضای اطرافیکنواخت فضا

هم ترازی محتوا:^جدید

شروع کنیدمرکزپایانفاصله بینفضای اطرافیکنواخت فضا

align-content مانند است justify-content، اما روی ردیف ها به جای ستون ها تأثیر می گذارد. به همین ترتیب align-items مانند است justify-items، اما با آن کنار می آید عمودی تراز کردن عناصر در داخل شبکه آنها به جای افقی.

برای تجزیه بیشتر چیزها:

• justify - با ستون ها.

• align - با خطوط.

• content - با ساختار شبکه.

• items - با گره های DOM در ساختار شبکه

در نهایت، علاوه بر justify-self، ما هم داریم align-self. این ویژگی موقعیت عمودی یک عنصر شبکه را در سلول آن کنترل می کند.

پیوند به این عنوانترفند مرکز دو خط

آخرین چیزی است که می خواهم به شما نشان دهم. این یکی از ترفندهای کوچک مورد علاقه من در CSS Grid است.

تنها با استفاده از دو ویژگی CSS، می‌توانیم یک فرزند را در یک ظرف، هم به صورت افقی و هم به صورت عمودی، در مرکز قرار دهیم:

این place-content اموال مختصر است این قند نحوی برای این است:

در کلیپ بورد کپی کنید

.parent {
  justify-content: center;
  align-content: center;
}

همانطور که یاد گرفتیم، justify-content موقعیت ستون ها را کنترل می کند. align-content موقعیت ردیف ها را کنترل می کند. در این شرایط، ما یک شبکه ضمنی با یک فرزند داریم و بنابراین به یک شبکه 1×1 ختم می‌شویم. place-content: center سطر و ستون را به مرکز فشار می دهد.

راه‌های زیادی برای وسط یک div در CSS مدرن وجود دارد، اما این تنها راهی است که من از آن می‌دانم که فقط به دو اعلان CSS نیاز دارد!

در این آموزش، ما برخی از اساسی ترین بخش های الگوریتم طرح بندی شبکه CSS را پوشش دادیم، اما صادقانه بگویم، در اینجا خیلی چیزهای دیگر ما صحبت نکرده ایم!

اگر این پست وبلاگ را مفید یافتید، شاید برایتان جالب باشد که بدانید من یک منبع یادگیری جامع ایجاد کرده ام بسیار عمیق تر. CSS برای جاوا اسکریپت نامیده می شود توسعه دهندگان(در برگه جدید باز می شود).

این دوره از فناوری های مشابه وبلاگ من استفاده می کند و بنابراین پر از توضیحات تعاملی است. اما ویدئوهای کمی، تمرینات عملی، پروژه های الهام گرفته شده از دنیای واقعی و حتی چند بازی کوچک نیز وجود دارد.

اگر این پست وبلاگ را مفید یافتید، شما دوره را دوست خواهید داشت. این رویکرد مشابهی را دنبال می کند، اما برای کل زبان CSS و با تمرین عملی برای اطمینان از اینکه شما واقعاً مهارت های جدیدی را توسعه می دهید.

این برنامه مخصوص افرادی است که از چارچوب JS مانند React/Angular/Vue استفاده می کنند. 80٪ از دوره بر روی اصول CSS تمرکز دارد، اما ما همچنین می بینیم که چگونه این اصول را در یک برنامه مدرن JS ادغام کنیم، چگونه CSS خود را ساختار دهیم، و مواردی از این قبیل.

اگر با CSS مشکل دارید، امیدوارم آن را بررسی کنید. کسب اطمینان با CSS است یک تغییر دهنده بازیبه خصوص اگر در HTML و JS خوب هستید. هنگامی که تثلیث مقدس را کامل می کنید، به روز ماندن و لذت بردن از توسعه برنامه های وب بسیار آسان تر می شود.

در اینجا می توانید اطلاعات بیشتری کسب کنید:

امیدوارم این آموزش برای شما مفید بوده باشد. ❤️

آخرین به روز رسانی از

8 ژوئن 2026