CSS ग्रिड में अलग-अलग एलिमेंट को दोनों एक्सेस पर अलाइन करना

किसी अलग एलिमेंट को हॉरिजॉन्टल और वर्टिकल दोनों एक्सेस पर अलाइन किया जा सकता है justify-self और align-self प्रॉपर्टीज को कॉम्बिन करके।

हॉरिजॉन्टल एक्सिस की शुरुआत और वर्टिकल एक्सिस के सेंटर पर

आइए हमारे पहले एलिमेंट को हॉरिजॉन्टल एक्सिस की शुरुआत और वर्टिकल एक्सिस के सेंटर पर अलाइन करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: start;
  align-self: center;
}

Результат:

हॉरिजॉन्टल एक्सिस के सेंटर और वर्टिकल एक्सिस की शुरुआत पर

अब आइए पहले एलिमेंट को हॉरिजॉन्टल एक्सिस के सेंटर और वर्टिकल एक्सिस की शुरुआत पर अलाइन करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: center;
  align-self: start;
}

Результат:

हॉरिजॉन्टल एक्सिस के अंत और वर्टिकल एक्सिस के सेंटर पर

आइए पहले एलिमेंट को हॉरिजॉन्टल एक्सिस के अंत और वर्टिकल एक्सिस के सेंटर पर अलाइन करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: end;
  align-self: center;
}

Результат:

प्रैक्टिकल टास्क्स