सीएसएस में ग्रिड टाइल

आइए ग्रिड सिस्टम के साथ व्यावहारिक कार्य पर आगे बढ़ें और विभिन्न इंडेंटेशन वाली टाइलें बनाएं।

बिना गैप के एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

आइए नौ तत्वों वाली एक तालिका बनाएं और उन्हें तीन कॉलम में व्यवस्थित करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

गैप के साथ एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

अब तत्वों के बीच गैप बनाने के लिए grid-gap प्रॉपर्टी लागू करते हैं:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

केवल ब्लॉकों के बीच गैप के साथ एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

और अब आइए ग्रिड में केवल ब्लॉकों के बीच दूरी निर्धारित करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

गायब ब्लॉक के साथ एक पंक्ति में 3 के साथ 8 ब्लॉकों वाली टाइल

आइए एक ऐसी टाइल बनाएं जिसमें निचली पंक्ति में एक ब्लॉक की कमी हो:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

व्यावहारिक कार्य