CSS Grid مشروح

كل خاصية CSS Grid الشائعة، مجمّعة حسب مكان تطبيقها: الحاوية، والعنصر، ووحدات التحجيم. يقرن كل صف الخاصية بقيمها الشائعة.

يرتّب Grid العناصر في بُعدين: صفوف وأعمدة في آنٍ واحد. عيّن display: grid على العنصر الأب، وحدّد المسارات بخاصيتي grid-template-columns وgrid-template-rows، ثم ضع العناصر الأبناء في الخلايا. استخدم grid لتخطيطات الصفحات والبطاقات؛ واستخدم flexbox للأشرطة أحادية البُعد. ويمكن دمجهما بحرية.

جدول مرجعي · 33 إدخالات

33 of 33 rows


الحاوية
	grid \| inline-grid	يحوّل العنصر إلى حاوية grid.
	1fr 1fr \| repeat(3, 1fr) \| 200px 1fr	يحدّد الأعمدة وعرضها.
	auto 1fr auto	يحدّد الصفوف وارتفاعها.
	[main-start] 1fr [main-end]	يُسمّي خطوط الشبكة في قالب ويضع العناصر حسب هذه الأسماء.
	1rem \| 8px 16px	المسافة بين الصفوف والأعمدة.
	"header header" "nav main"	يُسمّي الخلايا لوضع أوضح وأسهل قراءة.
	"head head" 64px "nav main" 1fr / 200px 1fr	يعيّن الصفوف والأعمدة والمناطق في صيغة مختصرة واحدة.
	repeat(2, 1fr) / auto-flow 80px	يعيّن كل خصائص المسارات وgrid-auto-flow في إعلان واحد.
	minmax(80px, auto)	يعيّن ارتفاع الصفوف التي لا يحدّدها القالب.
	120px \| minmax(0, 1fr)	يعيّن عرض الأعمدة التي لا يحدّدها القالب.
	row \| column \| row dense	يختار المحور للعناصر غير الموضوعة؛ وdense يملأ الفراغات السابقة.
	start \| center \| end \| stretch	يحاذي كل عنصر داخل خليته على محور الصفوف.
	start \| center \| end \| stretch	يحاذي كل عنصر داخل خليته على محور الأعمدة.
	center \| start end	يعيّن align-items وjustify-items في إعلان واحد.
	start \| center \| space-between	يحاذي شبكة المسارات داخل الحاوية على محور الصفوف.
	start \| center \| space-between	يحاذي شبكة المسارات داخل الحاوية على محور الأعمدة.
	center \| end start	يعيّن align-content وjustify-content في إعلان واحد.
العنصر
	1 / 3 \| span 2	يضع عنصرًا في الأعمدة أو يمده عبر عدة أعمدة.
	1 / 2 \| span 3	يضع عنصرًا في الصفوف أو يمده عبر عدة صفوف.
	grid-column: 2 / -1	يعدّ الخطوط من نهاية الشبكة؛ الخط -1 هو الأخير.
	header \| 1 / 1 / 2 / 3	يُسمّي عنصرًا أو يضعه تحديدًا كاملًا في صيغة مختصرة واحدة.
	start \| center \| end \| stretch	يحاذي هذا العنصر وحده داخل خليته على محور الصفوف.
	start \| center \| end \| stretch	يحاذي هذا العنصر وحده داخل خليته على محور الأعمدة.
	center \| start end	يعيّن align-self وjustify-self في إعلان واحد.
وحدات التحجيم
	1fr \| 2fr	كسر من المساحة الحرة في المسار.
	auto \| 1fr auto	يحدّد حجم المسار حسب محتواه؛ والمحاذاة قد تمدّه.
	min-content \| max-content	يحدّد حجم المسار حسب أصغر محتواه أو أكبره.
	fit-content(180px)	يحدّد حجم المسار حسب محتواه دون تجاوز الحد المعطى.
	minmax(200px, 1fr)	يقيّد المسار بين حدٍّ أدنى وحدٍّ أقصى.
	repeat(4, 1fr)	يعيد نمط مسارات دون كتابة كل واحد منها.
	repeat(auto-fit, minmax(120px, 1fr))	يضيف أكبر عدد ممكن من المسارات؛ وauto-fit يطوي الفارغة منها.
	grid-template-columns: subgrid	يجعل الشبكة المتداخلة تتشارك مسارات الأب وأسماء خطوطه.
	grid-template-rows: masonry	تجريبي: يرصّ العناصر في أعمدة حسب الارتفاع بدلًا من صفوف ثابتة.