Egenskapen place-items

Egenskapen place-items anger samtidig justering av kolumner och rader, vilket avsevärt minskar koden vi använder. Med det första värdet sätter vi placeringen av elementet längs den vertikala axeln, och med det andra - längs den horisontella axeln. Egenskapen place-items anges i förälderelementet. Det är bekvämt att granska utförandet av place-items via webbläsarens debugger.

Syntax

cssselektor {
  place-items: horisontellt justeringsvärde vertikalt justeringsvärde;
}

Exempel . Justering till mitten av den vertikala axeln och början av den horisontella axeln

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;
}

Результат:

Låt oss titta på vårt grid via webbläsarens debugger:

Exempel . Justering till slutet av den vertikala axeln och mitten av den horisontella axeln

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;
}

Результат:

Och låt oss nu titta i debuggerpanelen:

Exempel . Justering till början av den vertikala axeln och slutet av den horisontella axeln

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;
}

Результат:

Låt oss titta på justeringen av element i celler med hjälp av webbläsarens debugger:

Se även