بعد ایجاد تگ ها ی اچ تی ام ال با استفاده از سلکتورهای سی اس اس عناصر صفحه انتخاب شده و ویژگی های سی اس اس را می پذیرد. flex box عنوانی اختصاری و برگرفته از flexible box یا جعبه ی منعطف است به این معنی ک آیتم ها تگ های html می توانند در آن جای گرفته و منعطف بوده. در واقع flex box در چینش صفحات واکنش گرا responsive کاربرد داشته چرا که با چیدن آیتم ها flex item در یک سطر یا ستون در یک ظرف نگهدارنده flex container به طور خودکار عنصر های صفحه با اندازه ی صفحه منطبق خواهد شد. این ماژول یا ویژگی در css3 معرفی شد و مشکلات float را نخواهد داشت با افزایش المنت ها مخصوصا المنت یا تگ تو در تو کار با float بسیار سخت و پیچیده می شد. با استفاده از ویژگی flex-shrink , flex-grow می توان مشخص کرد یک آیتم چه مقدار رشد داشته باشد و یا چقدر کوچک شود نسبت به سایر آیتم های موجود در جعبه ی انعطاف پذیر یا همان flex box

در هنگام طراحی و ایجاد یک وب سایت عناصر یا همان محتوا به کمک تگ ها در اچ تی ام ال ایجاد خواهد شد و با کمک سلکتورهای سی اس اس عناصر دلخواه انتخاب می شود. با کمک ویژگی display مشخص می شود عناصر در ظرف انعطاف پذیر flexible container قرار بگیرد. با کمک ویژگی flex مشخص خواهد شد آیتم ها سطری یا ستونی نمایش داده شود و یا سطری برعکس و یا ستونی بر عکس نمایش داده شود نحوه ی ویرایش در تصویر مشاهده می شود.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. یکی از ویژگی های سی اس اس که می توان به متن ها داد ویژگی فونت می باشد که این ویژگی با font-face@ مقدار دهی شده و فونت مورد نظر انتخاب و آدرس دهی می شود و به تگ انتخابی داده می شود.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. یکی از ویژگی های سی اس اس که می توان به متن ها داد ویژگی فونت می باشد ویژگی فونت در سی اس اس شامل font-style font-size font-family font-weight می باشد که کاربرد و مقادیری که می پذیرد در شکل بیان شده است. در میان این 4 ویژگی 2 ویژگی font-family font-size ضروری می باشد و 2 ویژگی دیگر اختیاری می باشد.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. در اینجا با آموزش ویژگی grid-gap با ما همراه باشید با استفاده از ویژگی grid-gap در سی اس اس می توان یک فضای خالی با مقدار مشخص بین سطرها و ستون های یک grid ایجاد کردی این ویژگی اختصار دو ویژگی grid-row-gap و grid-column-gap می باشد که نحوه ی ویرایش صحیح این دو ویژگی در تصویر بالا نمایش داده شده است با ما همراه باشید.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. مشابه حالتی که در فلکس باکس داشتیم باید یک ظرف باکس یا container با حالت نمایش display از نوع grid تعریف کنیم. ضروی می باشد که حالت نمایش ظرف به صورت grid تعریف شود تا تغییرات روی آیتم ها اجرا شود. بعد از اون هرچیزی که بزاریم داخل ظرف یا عنصر با حالت نمایش grid فرزندان یا آیتم های عنصر grid خواهد شد. باویژگی grid-template-row سطرهای grid , مشخص خواهد شد و اندازه ی هر سطر جداگانه با واحد اندازه گیری داده خواهد شد. باویژگی grid-template-column ستون های grid , مشخص خواهد شد و اندازه ی هر ستون جدا گانه با واحد اندازه گیری داده خواهد شد. اگر اندازه ها مقدار auto داشته باشد یعنی اندازه خودکار تنظیم شود . با آموزش های بیش تر در کنار شما هستیم.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. در اینجا با آموزش ویژگی grid-gap با ما همراه باشید با استفاده از ویژگی grid-gap در سی اس اس می توان یک فضای خالی با مقدار مشخص بین سطرها و ستون های یک grid ایجاد کردی این ویژگی اختصار دو ویژگی grid-row-gap و grid-column-gap می باشد که نحوه ی ویرایش صحیح این دو ویژگی در تصویر بالا نمایش داده شده است با ما همراه باشید.

برای ایجاد و توسعه یک وب سایت در قدم اول تگ های اچ تی ام ال ایجاد شده و محتوا در تگ باز و بسته اچ تی ام ال قرار خواهد گرفت. بعد از ایجاد محتوا صفحه ای ساده و بدون استایل خواهیم داشت که با کمک سلکتورهای سی اس اس تگ دلخواه و انتخاب کرده و با ویژگی های زبان سی اس اس به تگ های سند اچ تی ام ال استایل خواهیم داد. در این بخش به توضیح ویژگی grid-row خواهیم پرداخت با کمک ویژگی grid-row می توان ویژگی grid-row-start , grid-row-end را که در شکل بیان شده به صورت خلاصه نوشت. آدرس دهی کرد از کدام سطر تا کدام سطر ادغام شود.
;grid-row:1span3 -> یعنی آیتم از سطر 1 تا سطر 3 و شامل شود و سطرها ادغام شود.