CSS

CSS Grid Column Start
خاصية grid-column-start في لغة CSS

سوف تتعلم في هذا الدرس خاصية grid-column-start في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

التاريخ

11 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

536

المواضيع

24
chevron_right التالى
64%
السابق chevron_left
الشروحات chevron_left CSS Grid Column Start chevron_left CSS
CSS Syntax keyboard_arrow_down
check check_circle_outline 1 - CSS Introduction
check check_circle_outline 2 - CSS Syntax
check check_circle_outline 3 - CSS Selectors
check check_circle_outline 4 - CSS How To
check check_circle_outline 5 - CSS Comments
check check_circle_outline 6 - CSS Important
CSS Text keyboard_arrow_down
check check_circle_outline 7 - Text Color
check check_circle_outline 8 - Text Alignment
check check_circle_outline 9 - Vertical Alignment
check check_circle_outline 10 - Text Transformation
check check_circle_outline 11 - Text Spacing
check check_circle_outline 12 - White Space
check check_circle_outline 13 - Text Shadow
check check_circle_outline 14 - Text Direction
CSS Text Decoration keyboard_arrow_down
check check_circle_outline 15 - Decoration Line
check check_circle_outline 16 - Decoration Color
check check_circle_outline 17 - Decoration thickness
check check_circle_outline 18 - Decoration Style
check check_circle_outline 19 - Decoration Shorthand
CSS Fonts keyboard_arrow_down
check check_circle_outline 20 - Font Size
check check_circle_outline 21 - Font Family
check check_circle_outline 22 - Font Style
check check_circle_outline 23 - Font Shorthand
check check_circle_outline 24 - Google Font
CSS Backgrounds keyboard_arrow_down
check check_circle_outline 25 - Background Color
check check_circle_outline 26 - Background Image
check check_circle_outline 27 - Background Size
check check_circle_outline 28 - Background Repeat
check check_circle_outline 29 - Background Attachment
check check_circle_outline 30 - Background Position
check check_circle_outline 31 - Background Shorthand
CSS Borders keyboard_arrow_down
check check_circle_outline 32 - CSS Borders
check check_circle_outline 33 - Border style
check check_circle_outline 34 - Border Width
check check_circle_outline 35 - Border Color
check check_circle_outline 36 - Border Sides
check check_circle_outline 37 - Border Shorthand
check check_circle_outline 38 - Rounded Borders
CSS Outline keyboard_arrow_down
check check_circle_outline 39 - CSS Outline
check check_circle_outline 40 - Outline style
check check_circle_outline 41 - Outline Width
check check_circle_outline 42 - Outline Color
check check_circle_outline 43 - Outline Offset
check check_circle_outline 44 - Outline Shorthand
CSS Box Model keyboard_arrow_down
check check_circle_outline 45 - CSS Margin
check check_circle_outline 46 - CSS Padding
check check_circle_outline 47 - Box Sizing
check check_circle_outline 48 - Box Model
CSS Dimensions keyboard_arrow_down
check check_circle_outline 49 - CSS Height
check check_circle_outline 50 - CSS Width
check check_circle_outline 51 - Max Height
check check_circle_outline 52 - Min Height
check check_circle_outline 53 - Max Width
check check_circle_outline 54 - Min Width
check check_circle_outline 55 - Calculator
CSS Position keyboard_arrow_down
check check_circle_outline 56 - CSS Display
check check_circle_outline 57 - CSS Visibility
check check_circle_outline 58 - CSS Float
check check_circle_outline 59 - CSS Clear
check check_circle_outline 60 - CSS Position
check check_circle_outline 61 - Layers Orders
check check_circle_outline 62 - CSS Overflow
CSS Style keyboard_arrow_down
check check_circle_outline 63 - CSS Links
check check_circle_outline 64 - CSS Images
check check_circle_outline 65 - CSS Lists
check check_circle_outline 66 - CSS Tables
check check_circle_outline 67 - CSS Transparency
CSS Navigation keyboard_arrow_down
check check_circle_outline 68 - CSS Navigation Bar
check check_circle_outline 69 - Vertical Navigation
check check_circle_outline 70 - Horizontal Navigation
CSS Flex Box keyboard_arrow_down
check check_circle_outline 71 - CSS Flexbox
check check_circle_outline 72 - Flex Direction
check check_circle_outline 73 - Flex Wrap
check check_circle_outline 74 - Flex Flow
check check_circle_outline 75 - Justify Content
check check_circle_outline 76 - Align Items
check check_circle_outline 77 - Align Content
check check_circle_outline 78 - Flex Order
check check_circle_outline 79 - Flex Basis
check check_circle_outline 80 - Flex Grow
check check_circle_outline 81 - Flex Shrink
check check_circle_outline 82 - Align Self
check check_circle_outline 83 - CSS Flex
CSS Grid System keyboard_arrow_down
check check_circle_outline 84 - Grid System
check check_circle_outline 85 - Grid Container
check check_circle_outline 86 - Grid Items
CSS Grid Columns keyboard_arrow_down
check check_circle_outline 87 - Template Columns
check check_circle 88 - Column Start
check check_circle_outline 89 - Column End
check check_circle_outline 90 - Grid Column
check check_circle_outline 91 - Auto Columns
CSS Grid rows keyboard_arrow_down
check check_circle_outline 92 - Template Rows
check check_circle_outline 93 - Row Start
check check_circle_outline 94 - Row End
check check_circle_outline 95 - Grid Row
check check_circle_outline 96 - Auto Rows
check check_circle_outline 97 - Grid Template
CSS Grid Area keyboard_arrow_down
check check_circle_outline 98 - Template Areas
check check_circle_outline 99 - Grid Area
CSS Grid Gaps keyboard_arrow_down
check check_circle_outline 100 - Row Gap
check check_circle_outline 101 - Grid Gap
check check_circle_outline 102 - Column Gap
CSS Grid keyboard_arrow_down
check check_circle_outline 103 - Grid Content
check check_circle_outline 104 - Grid Flow
check check_circle_outline 105 - Repeat Function
CSS Responsive keyboard_arrow_down
check check_circle_outline 106 - RWD Introduction
check check_circle_outline 107 - RWD Viewport
check check_circle_outline 108 - Media Queries
check check_circle_outline 109 - Media Examples
check check_circle_outline 110 - RWD Grid View
check check_circle_outline 111 - RWD Grid Media
check check_circle_outline 112 - RWD Video
check check_circle_outline 113 - RWD Image
check check_circle_outline 114 - Flex Responsive
CSS Text Effects keyboard_arrow_down
check check_circle_outline 115 - Text Overflow
check check_circle_outline 116 - Word Wrap
check check_circle_outline 117 - Writing Mode
CSS Advanced keyboard_arrow_down
check check_circle_outline 118 - Background Origin
check check_circle_outline 119 - CSS Pagination
check check_circle_outline 120 - CSS Buttons
check check_circle_outline 121 - Column Count
check check_circle_outline 122 - 2D Transforms
check check_circle_outline 123 - 3D Transforms
check check_circle_outline 124 - CSS Transitions
check check_circle_outline 125 - Background Clip
check check_circle_outline 126 - Rounded Corners
check check_circle_outline 127 - CSS Colors
check check_circle_outline 128 - Multiple Backgrounds
check check_circle_outline 129 - Color Keywords
check check_circle_outline 130 - Color Gradients
check check_circle_outline 131 - Border Images
check check_circle_outline 132 - CSS Animations
check check_circle_outline 133 - CSS Tooltip
check check_circle_outline 134 - CSS Variables
check check_circle_outline 135 - CSS Dynamic
CSS Selectors keyboard_arrow_down
check check_circle_outline 136 - Combinator selectors
check check_circle_outline 137 - Pseudo Classes

CSS Grid Column Start
خاصية grid-column-start في لغة CSS

</> CSS Grid Column Start
خاصية grid-column-start في لغة CSS

تستخدم خاصية grid-column-start مع العناصر الداخلية لحاوية grid في لغة CSS لعرض العنصر في موضع معين يبدا من خط أو من عمود معين فيمكن اول عنصر يبدأ من تاني عمود أو تاني خط أو يحجز مساحة عمود أو أكثر.


قيم خاصية grid-column-start في لغة CSS:

  • auto هي القيمة الأفتراضية ويتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid.
  • span تحديد عدد الأعمدة أو عدد المربعات التي سوف يقوم بحجزها العنصر نسبة لحجم الأعمدة الأخري.
  • column-line تحديد يبدأ عرض العنصر بداية من رقم line الخط الموجود بعد كل عمود.
CSS grid-column-start syntax

طريقة كتابة خاصية grid-column-start في لغة CSS. 

grid-column-start:value;
CSS grid-column-start values

قيم خاصية grid-column-start في لغة CSS. 

grid-column-start:auto|span|column-line;

</> CSS grid column start auto
خاصية grid-column-start مع القيمة auto في لغة CSS

تستخدم خاصية grid-column-start في لغة CSS والقيمة auto ليتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid وهي القيمة الأفتراضية.
جربها بنفسك chevron_right
CSS grid column start auto

خاصية grid-column-start مع القيمة auto في لغة CSS. 

.one
{
  grid-column-start:auto;
}
جربها بنفسك chevron_right

</> CSS grid column start span
خاصية grid-column-start مع القيمة span في لغة CSS

تستخدم خاصية grid-column-start في لغة CSS والقيمة span لتحديد عدد الأعمدة أو عدد المربعات التي سوف يقوم بحجزها العنصر نسبة لحجم الأعمدة الأخري.
جربها بنفسك chevron_right
CSS grid column start span

خاصية grid-column-start مع القيمة span في لغة CSS. 

.one
{
  grid-column-start:span 4;
}
جربها بنفسك chevron_right
CSS grid column start span two

خاصية grid-column-start مع القيمة span 2 في لغة CSS. 

.one
{
  grid-column-start:span 2;
}
جربها بنفسك chevron_right
CSS grid column start span three

خاصية grid-column-start مع القيمة span 3 في لغة CSS. 

.nine
{
  grid-column-start:span 3;
}
جربها بنفسك chevron_right

</> CSS grid column start column line
خاصية grid-column-start مع القيمة column line في لغة CSS

تستخدم خاصية grid-column-start في لغة CSS والقيمة column line لتحديد يبدأ عرض العنصر بداية من رقم line الخط الموجود بعد كل عمود.
جربها بنفسك chevron_right
CSS grid column start column line

خاصية grid-column-start مع القيمة column line في لغة CSS. 

.one
{
  grid-column-start:2;
}
جربها بنفسك chevron_right
CSS grid column start line four

خاصية grid-column-start مع القيمة four في لغة CSS. 

.one
{
 grid-column-start:4;
}
جربها بنفسك chevron_right
CSS grid column start twelve

خاصية grid-column-start مع القيمة 12 في لغة CSS. 

.nine
{
  grid-column-start:12;
}
جربها بنفسك chevron_right
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات
chevron_right التالى
السابق chevron_left

CLOSETAG CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

الشروحات

HTML

CSS

JavaScript

الدورات

HTML5

CSS

Java Script

قانوني

الأحكام والشروط

اتفاقية الترخيص

سياسة الخصوصية

معلومات حقوق النشر

سياسة ملفات الارتباط

الدعم

أسئلة وأجوبة

اتصل بنا

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة
CLOSETAG