place-items गुण

place-items गुण एक साथ कॉलम और पंक्तियों के संरेखण को निर्धारित करता है, जो हमारे द्वारा उपयोग किए जाने वाले कोड को काफी कम कर देता है। पहले मान के साथ हम ऊर्ध्वाधर अक्ष के साथ तत्व की स्थिति निर्धारित करते हैं, और दूसरे के साथ - क्षैतिज अक्ष के साथ। place-items गुण मूल तत्व में निर्धारित किया जाता है। place-items के साथ काम करने का निष्पादन ब्राउज़र डिबगर के माध्यम से देखना सुविधाजनक है।

सिंटैक्स

cssसिलेक्टर {
  place-items: क्षैतिज संरेखण मान ऊर्ध्वाधर संरेखण मान;
}

उदाहरण . ऊर्ध्वाधर अक्ष के केंद्र और क्षैतिज अक्ष की शुरुआत में संरेखण

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

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

आइए ब्राउज़र डिबगर के माध्यम से अपने ग्रिड को देखें:

उदाहरण . ऊर्ध्वाधर अक्ष के अंत और क्षैतिज अक्ष के केंद्र में संरेखण

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

css#parent {
  display: grid;
  place-items: end center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

और अब डिबगर पैनल में देखते हैं:

उदाहरण . ऊर्ध्वाधर अक्ष की शुरुआत और क्षैतिज अक्ष के अंत में संरेखण

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

css#parent {
  display: grid;
  place-items: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

आइए ब्राउज़र डिबगर की मदद से सेल के अंदर तत्वों के संरेखण को देखें:

यह भी देखें