प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid Layout (grid layout) तथा Flexbox (flexible box layout) इत्यत्रgap एकः संक्षिप्तः गुणः अस्ति यः पङ्क्ति-अन्तरस्य (गटर) तथा स्तम्भ-अन्तरस्य (प्रायः Flexbox मध्ये "cross-axis gap" इति उच्यते) इत्येतयोः आकारं सेट् करोति ।एषः गुणः पूर्वं पृथक् सेट् कर्तुं आवश्यकतां बहु सरलीकरोतिrow-gap(वा grid-row-gap in legacy CSS Grid) तथाcolumn-gap(वा grid-column-gap) बोझिल प्रक्रिया।

Grid Layout इत्यत्र उपयुज्यते

CSS Grid Layout इत्यस्मिन्, .gap गुणाः एकस्मिन् समये जालपङ्क्तयः जालस्तम्भयोः मध्ये अन्तरालस्य आकारं सेट् कर्तुं शक्नुवन्ति ।

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

Flexbox इत्यत्र उपयुज्यते

फ्लेक्सबॉक्स इत्यत्र, .gap गुणस्य उपयोगः फ्लेक्स-वस्तूनाम् अन्तरं सेट् कर्तुं भवति, अस्मिन् मुख्य-अक्षे क्रॉस्-अक्षे च अन्तरं समावेशितम् अस्ति (यद्यपि Flexbox इत्यस्मिन् क्रॉस्-अक्ष-अन्तरस्य अवधारणा Grid इत्यस्य इव सहजं न भवितुम् अर्हति, यतः मुख्यतया तस्य विन्यासं प्रभावितं करोति बहुरेखा फ्लेक्स पात्र)।

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

कृपया ज्ञातव्यं,gap विशेषणस्य मूल्यं दीर्घता भवितुम् अर्हति (उदा.px、em、vw इत्यादि), प्रतिशतं वा अन्यत् किमपिrow-gapतथाcolumn-gap स्वीकृत कानूनी मूल्य।अतिरिक्तरूपेण, यदि भवतः आवश्यकता अस्तिrow-gapतथाcolumn-gapभिन्नानि मूल्यानि सेट् कर्तुं भवन्तः एतौ मूल्यौ यथा पारयितुं शक्नुवन्तिgapगुणः द्वयोः आर्गुमेण्ट्-रूपेण प्रदत्तः अस्ति, प्रथमं मूल्यं पङ्क्ति-अन्तरस्य अनुरूपं भवति, द्वितीयं मूल्यं च स्तम्भ-अन्तरस्य (Grid मध्ये) अथवा क्रॉस्-अक्ष-अन्तरस्य (Flexbox मध्ये, यद्यपि एतत् न्यूनं सामान्यम्) अनुरूपं भवति

ज्ञातव्यं यत् यद्यपि...gapअद्यतन-ब्राउजर्-संस्करणेषु गुणाः व्यापकरूपेण समर्थिताः सन्ति, परन्तु CSS अद्यापि पश्चात्ताप-सङ्गतिं मनसि कृत्वा लिखितव्यं, तस्य उपयोगः आवश्यकः भवितुम् अर्हति-webkit-उपसर्गं (केषाञ्चन प्राचीनब्राउजर् कृते) अथवा fallback प्रदातव्यम् ।