CSS grid-column-start प्रॉपर्टी - ग्रिड आइटम कहां से शुरू हो

grid-column-start प्रॉपर्टी निर्धारित करती है कि ग्रिड आइटम किस कॉलम लाइन से शुरू होगा। यह ग्रिड आइटम की क्षैतिज (हॉरिजॉन्टल) शुरुआती स्थिति सेट करती है।

उदाहरण: आइटम 1 को कॉलम लाइन 2 से शुरू करें

सामान्यतः आइटम 1 कॉलम लाइन 1 से शुरू होता है, लेकिन grid-column-start: 2 से यह दूसरी कॉलम लाइन से शुरू होता है, पहला कॉलम खाली छोड़ देता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto auto;
      grid-gap: 10px;
      background-color: red;
      padding: 10px;
    }
    .container > div {
      background-color: yellow;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
    }
    .ele1 {
      grid-column-start: 2;  /* दूसरी कॉलम लाइन से शुरू */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

grid-column-start मान

संबंधित प्रॉपर्टीज़

/* शॉर्टहैंड */
grid-column: 2 / 4;        /* शुरू / अंत */
grid-column: 2 / span 2;   /* शुरू / फैलाव */

/* व्यक्तिगत */
grid-column-start: 2;
grid-column-end: 4;        /* या span 2 */
grid-column-end: span 2;

नामित ग्रिड लाइन्स के साथ

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [content-start] 1fr [content-end];
}
.sidebar {
  grid-column-start: sidebar-start;
  grid-column-end: content-start;
}