پراپرتی display در CSS یکی از پراپرتی‌های مهم و پرکاربرد است که نحوه نمایش یک عنصر را مشخص می‌کند. با استفاده از این پراپرتی، می‌توانید تعیین کنید که یک عنصر به صورت بلاک، اینلاین یا حتی به صورت گرید یا فلکس نمایش داده شود. در اینجا به معرفی و توضیح برخی از مقادیر متداول پراپرتی display می‌پردازیم.
ابتدا با دو مقدار اساسی display یعنی بلاک و اینلاین شروع می‌کنیم. زمانی که یک عنصر به صورت بلاک تعریف می‌شود، عرض آن به صورت پیش‌فرض ۱۰۰ درصد فضای والد را اشغال می‌کند و به طور کامل در یک خط جای می‌گیرد. از طرف دیگر، عناصر اینلاین تنها به اندازه محتوای خود فضا اشغال می‌کنند و می‌توانند در کنار یکدیگر قرار بگیرند.
علاوه بر این دو حالت، مقادیر دیگری نیز وجود دارند که نمایش عناصر را زیباتر و کارآمدتر می‌کنند. از جمله این مقادیر می‌توان به flex و grid اشاره کرد که برای طراحی‌های پیچیده‌تر و مدرن‌تر استفاده می‌شوند. مقدار flex به شما این امکان را می‌دهد تا با استفاده از یک سیستم انعطاف‌پذیر، چینش صفحه را ساده‌تر مدیریت کنید، در حالی که grid برای ایجاد صفحات با چینش دقیق‌تر و شبک‌های پیچیده‌تر به کار می‌رود.
در نمونه کد زیر می‌توانید نحوه استفاده از پراپرتی display را ببینید:
<div style="display: block;">این یک بلاک است</div>
<span style="display: inline;">این یک اینلاین است</span>
<div style="display: flex;">
<div>آیتم ۱</div>
<div>آیتم ۲</div>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr);">
<div>شبکه ۱</div>
<div>شبکه ۲</div>
</div>
توضیحات خط به خط کد
<div style="display: block;">این یک بلاک است</div> این خط نشان‌دهنده یک بلاک است که به صورت یک عنصر کامل در یک خط قرار می‌گیرد.
<span style="display: inline;">این یک اینلاین است</span> این خط یک عنصر اینلاین را نشان می‌دهد که تنها به اندازه محتوای خود فضا اشغال می‌کند.
<div style="display: flex;"> این خط یک کانتینر فلکس را شروع می‌کند که محتوای آن به صورت انعطاف‌پذیر سازمان‌دهی می‌شود.
<div>آیتم ۱</div> آیتم اول در داخل کانتینر فلکس.
<div>آیتم ۲</div> آیتم دوم در داخل کانتینر فلکس.
<div style="display: grid; grid-template-columns: repeat(2, 1fr);"> این خط یک کانتینر گرید را شروع می‌کند که دارای دو ستون برابر است.
<div>شبکه ۱</div> اولین آیتم در شبکه گرید.
<div>شبکه ۲</div> دومین آیتم در شبکه گرید.